jQuery 3d视角旋转木马效果

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html {
  height: 100%;
}
body {
  height: 100%;
  color: #eee;
  background: black;
  margin: 0;
  overflow-x: hidden;
}

#showcase {
      height: 460px;
      //background: #16235e;
      //background: -moz-linear-gradient(top, #16235e 0%, #020223 100%); /* FF3.6+ */
      //background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#16235e), color-stop(100%,#020223)); /* Chrome, Safari4+ */
      //background: -webkit-linear-gradient(top, #16235e 0%, #020223 100%); /* Chrome10+, Safari5.1+ */
      //background: -o-linear-gradient(top, #16235e 0%, #020223 100%); /* Opera 11.10+ */
      //background: -ms-linear-gradient(top, #16235e 0%, #020223 100%); /* IE10+ */
      //background: linear-gradient(to bottom, #16235e 0%, #020223 100%); /* W3C */
      -webkit-box-shadow: 0px 0px 13px 5px #DB1242;
      -moz-box-shadow: 0px 0px 13px 5px #DB1242;
      box-shadow: 0px 0px 13px 5px #DB1242;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
    }
    #share {
      top: -9px;
    }
    #credits {
      top: -15px;
    }
$(function() {
      var showcase = $("#showcase"), title = $('#item-title')

      showcase.Cloud9Carousel( {
        yOrigin: 42,
        yRadius: 48,
        mirror: {
          gap: 12,
          height: 0.2
        },
        buttonLeft: $("#nav > .left"),
        buttonRight: $("#nav > .right"),
        autoPlay: 1,
        bringToFront: true,
        onRendered: rendered,
        onLoaded: function() {
          showcase.css( 'visibility', 'visible' )
          showcase.css( 'display', 'none' )
          showcase.fadeIn( 1500 )
        }
      } )

      function rendered( carousel ) {
        title.text( carousel.nearestItem().element.alt )

        // Fade in based on proximity of the item
        var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
        title.css('opacity', 0.5 + (0.5 * c))
      }

      //
      // Simulate physical button click effect
      //
      $('#nav > button').click( function( e ) {
        var b = $(e.target).addClass( 'down' )
        setTimeout( function() { b.removeClass( 'down' ) }, 80 )
      } )

      $(document).keydown( function( e ) {
        //
        // More codes: http://www.javascripter.net/faq/keycodes.htm
        //
        switch( e.keyCode ) {
          /* left arrow */
          case 37:
            $('#nav > .left').click()
            break

          /* right arrow */
          case 39:
            $('#nav > .right').click()
        }
      } )
    })