Cube experiment 2

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

by laustdeleuran

HTML

<div class="experiment">
    <div class="cube">
        <div class="face is-one">
            1
        </div>
        <div class="face is-two">
            2
        </div>
        <div class="face is-three">
            3
        </div>
        <div class="face is-four">
            4
        </div>
        <div class="face is-five">
            5
        </div>
        <div class="face is-six">
            6
        </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>
<button class="panels-backface-visibility">Toggle backface visibility</button>

CSS

.experiment {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 20px auto 40px;
    border: 1px solid #CCC;
    -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;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
    -webkit-transform: translateZ( -100px );
     -moz-transform: translateZ( -100px );
       -o-transform: translateZ( -100px );
          transform: translateZ( -100px );

}
.face {
    display: block;
    position: absolute;
    width: 196px;
    height: 196px;
    border: 2px solid black;
    line-height: 196px;
    font-size: 120px;
    font-weight: bold;
    color: white;
    text-align: center;
}
.cube.panels-backface-visibility .face {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.face.is-one   { 
    background: hsla(   0, 100%, 50%, 0.7 ); 
    -webkit-transform: translateZ( 100px );
     -moz-transform: translateZ( 100px );
       -o-transform: translateZ( 100px );
          transform: translateZ( 100px );
}
.face.is-two   { 
    background: hsla(  60, 100%, 50%, 0.7 ); 
    -webkit-transform: rotateX( -180deg ) translateZ( 100px );
     -moz-transform: rotateX( -180deg ) translateZ( 100px );
       -o-transform: rotateX( -180deg ) translateZ( 100px );
          transform: rotateX( -180deg ) translateZ( 100px );
}
.face.is-three { 
    background: hsla( 120, 100%, 50%, 0.7 ); 
    -webkit-transform: rotateY(   90deg ) translateZ( 100px );
     -moz-transform: rotateY(   90deg ) translateZ( 100px );
  ...

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'));
    });
});