Cube experiment 2.1

http://desandro.github.com/3dtransforms/docs/cube.html

by laustdeleuran

HTML

<div class="experiment">
    <div class="cube">
        <div class="face is-one">
            <div class="cut is-top"></div>
            <div class="cut is-bottom"></div>
            <div class="cut is-left"></div>
            <div class="cut is-right"></div>
            <div class="content"></div>
        </div>
        <div class="face is-two">
            <div class="cut is-top"></div>
            <div class="cut is-bottom"></div>
            <div class="cut is-left"></div>
            <div class="cut is-right"></div>
            <div class="content"></div>
        </div>
        <div class="face is-three">
            <div class="cut is-top"></div>
            <div class="cut is-bottom"></div>
            <div class="cut is-left"></div>
            <div class="cut is-right"></div>
            <div class="content"></div>
        </div>
        <div class="face is-four">
            <div class="cut is-top"></div>
            <div class="cut is-bottom"></div>
            <div class="cut is-left"></div>
            <div class="cut is-right"></div>
            <div class="content"></div>
        </div>
        <div class="face is-five">
            <div class="cut is-top"></div>
            <div class="cut is-bottom"></div>
            <div class="cut is-left"></div>
            <div class="cut is-right"></div>
            <div class="content"></div>
        </div>
        <div class="face is-six">
            <div class="cut is-top"></div>
            <div class="cut is-bottom"></div>
            <div class="cut is-left"></div>
            <div class="cut is-right"></div>
            <div class="content"></div>
        </div>
    </div>
</div>

<button class="show-front">Show 1</button>
<button class="show-back">Show 2</button>
<button class="show-right">Show 3</button>
<button class="show-left">Show 4</button>
<button class="show-top">Show 5</button>
<button class="show-bottom">Show 6</button>

CSS

html {
    background-color: #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
    background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
    background-image:         linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
    height:100%;
}
.experiment {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 20px auto 40px;
    border: 1px solid #333;
    -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}
.cube {  
    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;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -moz-transition: -moz-transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
       -o-transition: -o-transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
          transition: transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -webkit-transform: translateZ( -200px );
     -moz-transform: translateZ( -200px );
       -o-transform: translateZ( -200px );
          transform: translateZ( -200px );

}
.face {
    display: block;
    position: absolute;
    width: 400px;
    height: 400px;
    line-height: 400px;
    font-weight: bold;
    color: #000;
    text-align: center;
    overflow:hidden;
    -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.face.is-one   { 
    -webkit-transform: translateZ( 200px...

JavaScript

$(document).ready(function () {
    var $buttons = $('button'), $cube = $('.cube');
    
    $buttons.on('click', function (event) {
        
        $cube
            .removeClass(function (index, css) {
                return (css.match (/\bshow-\S+/g) || []).join(' ');
            })
            .toggleClass($(this).attr('class'));
    });
});