3d Cube

http://css3.bradshawenterprises.com/transforms/

by peterbenoit

HTML

<div id="transDemo3">
    <div id="Zcube">
    <div id="Ycube">
    <div id="cube">
        <div class="face one">
            <p>1</p>
        </div>
        <div class="face two">
            <p>2</p>
        </div>
        <div class="face three">
            <p>3</p>
        </div>
        <div class="face four">
            <p>4</p>
        </div>
        <div class="face five">
            <p>5</p>
        </div>
        <div class="face six">
            <p>6</p>
        </div>
    </div>
    </div>
    </div>
</div>
        
<div id="td3controls">
    <label for="td3xrot">X rotation (1 deg)</label>
    <input id="td3xrot" type="range" min="-180" max="180" default="0">
    <label for="td3yrot">Y rotation (0 deg)</label>
    <input id="td3yrot" type="range" min="-180" max="180" default="0">
    <label for="td3zrot">Z rotation (0 deg)</label>
    <input id="td3zrot" type="range" min="-180" max="180" default="0">
    <label for="td3perspective">Perspective (800 px)</label>
    <input id="td3perspective" type="range" min="200" max="2000" default="800">
</div>

CSS

#transDemo3 {
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 100px;

    -moz-perspective: 800px;
    -moz-perspective-origin: 50% 100px;

    -o-perspective: 800px;
    -o-perspective-origin: 50% 100px;


    perspective: 800px;
    perspective-origin: 50% 100px;
    margin:50px auto;
    width:400px;
    float:left;
}

#transDemo3 #cube {
    position: relative;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin:(50% 100px 0);
    -moz-transform-style: preserve-3d;
    -moz-transform-origin:(50% 100px 0);
    -o-transform-style: preserve-3d;
    -o-transform-origin:(50% 100px 0);
    transform-style: preserve-3d;
    transform-origin:(50% 100px 0);
}

#transDemo3 #Ycube,#transDemo3 #Zcube {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#transDemo3 .face {
    position: absolute;
    height: 160px;
    width: 160px;
    padding: 20px;
    background-color: rgba(50, 50, 50, 0.3);
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    backface-visibility: visible;
    border:1px #aaa solid;
}

#transDemo3 .face p {
    font-size:160px;
    line-height:1;
    text-align:center;
    margin:0;
    padding:0;
    color:rgba(0,0,0,0.75);
}

#cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    -o-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(255, 0, 0, 0.5);
}

#cube .two {
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    transform: translateZ(100px);
}

#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(100px);
    -moz-transform: rotateY(90deg) translateZ(100px);
   ...

JavaScript

$(document).ready(function() {
    var vP = "";
    if ($.browser.webkit) {
        vP = "-webkit-";
    } else if ($.browser.mozilla) {
        vP = "-moz-";
    } else if ($.browser.opera) {
        vP = "-o-";
    }

    $('#td3controls #td3xrot').change(function () {
            $('#cube').css(vP+"transform","rotateX("+$('#td3controls input#td3xrot').val()+"deg)");
            $('label[for="td3xrot"]').html("X rotation ("+$('#td3controls input#td3xrot').val()+" deg)")
    });
    $('#td3controls #td3yrot').change(function () {
            $('#Ycube').css(vP+"transform","rotateY("+$('#td3controls input#td3yrot').val()+"deg)");
            $('label[for="td3yrot"]').html("Y rotation ("+$('#td3controls input#td3yrot').val()+" deg)")
    });
    $('#td3controls #td3zrot').change(function () {
            $('#Zcube').css(vP+"transform","rotateZ("+$('#td3controls input#td3zrot').val()+"deg)");
            $('label[for="td3zrot"]').html("Z rotation ("+$('#td3controls input#td3zrot').val()+" deg)")
    });
    $('#td3controls #td3perspective').change(function () {
            $('#transDemo3').css(vP+"perspective",$('#td3controls input#td3perspective').val()+"px");
            $('label[for="td3perspective"]').html("Perspective ("+$('#td3controls input#td3perspective').val()+" px)")
    });
});