<header>
 
 
<h1>3D Carousel Using TweenMax.js &amp; jQuery</h1>
 
 
 
 
<div id="fps">Framerate: 0/60 FPS</div>
 
 
    </header>
 
 
<div id="contentContainer" class="trans3d"> 
    <section id="carouselContainer" class="trans3d">
 
 
<figure id="item1" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">1</div></figure>
 
 
 
 
<figure id="item2" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">2</div></figure>
 
 
 
 
<figure id="item3" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">3</div></figure>
 
 
 
 
<figure id="item4" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">4</div></figure>
 
 
 
 
<figure id="item5" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">5</div></figure>
 
 
 
 
<figure id="item6" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">6</div></figure>
 
 
 
 
<figure id="item7" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">7</div></figure>
 
 
 
 
<figure id="item8" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">8</div></figure>
 
 
 
 
<figure id="item9" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">9</div></figure>
 
 
 
 
<figure id="item10" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">10</div></figure>
 
 
 
 
<figure id="item11" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">11</div></figure>
 
 
 
 
<figure id="item12" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">12</div></figure>
 
 
    </section>
</div>

html, body{ background-color:#1a948d; } 
 
body
{ 
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    width:100%;
    background-size:cover;
    height:100%;
    min-height:1000px;
    overflow:hidden;
    font-family: 'quicksandlight', Helvetica, Arial;
    color:#FFFFFF;
    text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
    filter: dropshadow(color=#000000, offx=1, offy=1);
}
 
header
{
 
    margin-top:30px;
    position:absolute;
    z-index:5;
    width:420px;
    padding-top:10px;
    padding-bottom:10px;
 
}
 
h1{
 
    font-size:36px;
    letter-spacing:-2.5px;
    margin-left:30px;
}
 
h3{
 
    font-size:16px;
    letter-spacing:-1.5px;
    margin-top:5px;
    margin-left:35px;
}
 
#fps
{
    margin-top:5px;
    margin-left:35px;
}
 
a
{
    color:rgba( 255, 255, 255, .65 );
    text-decoration: none;
}
 
a:hover
{
    color:rgba( 255, 255, 255, 1 );
}
 
/* hardware accelatator class */    
    .trans3d
    {
        -webkit-transform-style: preserve-3d;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform-style: preserve-3d;
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform-style:preserve-3d;
        -ms-transform: translate3d(0, 0, 0);
        transform-style:preserve-3d;
        transform: translate3d(0, 0, 0);
 
        /*-webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility:hidden;
        backface-visibility:hidden;*/
    }
 
    #contentContainer
    {
        position:absolute;
        margin-left:-500px;
        margin-top:-500px;
        left:50%;
        top:50%;
        width:1000px;
        height:1000px;
    }
 
    #carouselContainer
    {
        position:absolute;
        margin-left:-500px;
        margin-top:-500px;
        left:50%;
        top:50%;
        width:1000px;
        height:1000px;
    }
 
    .carouselItem
    {
        width:320px;
        height:130px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-160px;
        margin-top:-90px;
        visibility:hidden;
    }
 
    .carouselItemInner
    {
        width:320px;
        height:130px;
        position:absolute;
        background-color:rgba(255, 255, 255, .75);
        border:10px solid rgba(255, 255, 255, .5);
        color:aqua;
        font-size:72px;
        left:50%;
        top:50%;
        margin-left:-160px;
        margin-top:-90px;
        text-align:center;
        padding-top:50px;
 
    }

// set and cache variables
        var w, container, carousel, item, radius, itemLength, rY, ticker, fps; 
        var mouseX = 0;
        var mouseY = 0;
        var mouseZ = 0;
        var addX = 0;
 
 
        // fps counter created by: https://gist.github.com/sharkbrainguy/1156092,
        // no need to create my own :)
        var fps_counter = {
 
            tick: function () 
            {
                // this has to clone the array every tick so that
                // separate instances won't share state 
                this.times = this.times.concat(+new Date());
                var seconds, times = this.times;
 
                if (times.length > this.span + 1) 
                {
                    times.shift(); // ditch the oldest time
                    seconds = (times[times.length - 1] - times[0]) / 1000;
                    return Math.round(this.span / seconds);
                } 
                else return null;
            },
 
            times: [],
            span: 20
        };
        var counter = Object.create(fps_counter);
 
 
 
        $(document).ready( init )
 
        function init()
        {
            w = $(window);
            container = $( '#contentContainer' );
            carousel = $( '#carouselContainer' );
            item = $( '.carouselItem' );
            itemLength = $( '.carouselItem' ).length;
            fps = $('#fps');
            rY = 360 / itemLength;
            radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
 
            // set container 3d props
            TweenMax.set(container, {perspective:600})
            TweenMax.set(carousel, {z:-(radius)})
 
            // create carousel item props
 
            for ( var i = 0; i < itemLength; i++ )
            {
                var $item = item.eq(i);
                var $block = $item.find('.carouselItemInner');
 
        //thanks @chrisgannon!        
        TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});
 
                animateIn( $item, $block )                      
            }
 
            // set mouse x and y props and looper ticker
            window.addEventListener( "mousemove", onMouseMove, false );
            ticker = setInterval( looper, 1000/60 );            
        }
 
        function animateIn( $item, $block )
        {
            var $nrX = 360 * getRandomInt(2);
            var $nrY = 360 * getRandomInt(2);
 
            var $nx = -(2000) + getRandomInt( 4000 )
            var $ny = -(2000) + getRandomInt( 4000 )
            var $nz = -4000 +  getRandomInt( 4000 )
 
            var $s = 1.5 + (getRandomInt( 10 ) * .1)
            var $d = 1 - (getRandomInt( 8 ) * .1)
 
            TweenMax.set( $item, { autoAlpha:1, delay:$d } )    
            TweenMax.set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny, autoAlpha:0} )
            TweenMax.to( $block, $s, { delay:$d, rotationY:0, rotationX:0, z:0,  ease:Expo.easeInOut} )
            TweenMax.to( $block, $s-.5, { delay:$d, x:0, y:0, autoAlpha:1, ease:Expo.easeInOut} )
        }
 
        function onMouseMove(event)
        {
            mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;
            mouseY = -(-(window.innerHeight * .5) + event.pageY ) * .01;
            mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY ) - 200);
        }
 
        // loops and sets the carousel 3d properties
        function looper()
        {
            addX += mouseX
            TweenMax.to( carousel, 1, { rotationY:addX, rotationX:mouseY, ease:Quint.easeOut } )
            TweenMax.set( carousel, {z:mouseZ } )
            fps.text( 'Framerate: ' + counter.tick() + '/60 FPS' )  
        }
 
        function getRandomInt( $n )
        {
            return Math.floor((Math.random()*$n)+1);    
        }