Cube experiment 3 - Carousel

http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html

by ian_smithz

HTML

<script src="http://dev.ljd.dk/tmp/modernizr.custom.77805.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />            
    </head>
<body>
    <div class="experiment">
        <div class="carousel">
            <div class="face">
                1<br/>
                <a href="#next">Next</a><br/>
                <a href="#prev">Previous</a>
            </div>
            <div class="face">
                2<br/>
                <a href="#next">Next</a><br/>
                <a href="#prev">Previous</a>
            </div>
            <div class="face">
                3<br/>
                <a href="#next">Next</a><br/>
                <a href="#prev">Previous</a>
            </div>
            <div class="face">
                4<br/>
                <a href="#next">Next</a><br/>
                <a href="#prev">Previous</a>
            </div>
            <div class="face">
                5<br/>
                <a href="#next">Next</a><br/>
                <a href="#prev">Previous</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS

html {
    background:#37383a url(http://dev.ljd.dk/tmp/apple-texture.jpg) 0 0 repeat;
    color:#999;
    font-family:sans-serif;    
}
a {
    color:#fff;
}
.experiment {
    width: 400px;
    height: 300px;
    position: relative;
    margin: 10px auto;
    -webkit-perspective: 1100px;
       -moz-perspective: 1100px;
         -o-perspective: 1100px;
            perspective: 1100px;
}
.experiment.is-fullscreen {
    margin: 0 auto;
    position: fixed;
}
.carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.face {
    display: none;
    position: absolute;
    width: 400px;
    height: 300px;
    line-height: 1.5em;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.experiment.is-enhanced .carousel {
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
}
.experiment.is-enhanced .face {
    display:block;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
       -moz-transition: opacity 1s, -moz-transform 1s;
         -o-transition: opacity 1s, -o-transform 1s;
            transition: opacity 1s, transform 1s;
}

JavaScript

$(document).ready(function () {
    function Carousel () {
        return this.construct.apply(this, arguments);
    };
    Carousel.prototype = (function () {
        var construct, transform, getNext, getPrevious, getFace, // public methods
            defaults, transformProp, // private vars
            detectMarkup, setupFaces, setupFullscreen;// private methods
        
        // Vars
        defaults = {
            horizontal: true,
            fullscreen: true,
            fullscreenPercentage: 1
        };
        transformProp = Modernizr.prefixed('transform');
        
        // Methods
        construct = function ($container, settings) {
            var scope = this;
            
            scope.settings = $.extend({}, defaults, settings);
            
            detectMarkup.apply(scope, [$container]);
            
            setupFaces.apply(scope);
            
            setTimeout(function () {
                scope.markup.container.addClass('is-enhanced');
            }, 10);
            
            if (scope.settings.fullscreen) {
                setupFullscreen.apply(scope);
            }
            
            return scope;
        };
        detectMarkup = function ($container) {
            var scope = this;
            
            this.markup = {
                container: $container,
                carousel: $container.find('.carousel'),
                faces: $container.find('.face')
            };
            
            return scope;
        };
        setupFaces = function () {
            var scope = this;
            
            scope.rotation = 0;
            scope.faceCount = scope.markup.faces.length;
            scope.theta = 360 / scope.faceCount;
            scope.faceSize = scope.settings.horizontal ? scope.markup.container.width() :  scope.markup.container.height() ;
            scope.rotateFn = scope.settings.horizontal ? 'rotateY' : 'rotateX';
            scope.radius = Math.round( ( scope.faceSize / 2) /...