3D -> angles, superposition...

by iamvdo

HTML

<div id="cube">
    <div>toto</div>
    <div>toto</div>
    <div>toto</div>
    <div>toto</div>
    <div>toto</div>
    <div>toot</div>
</div>

<input id="X" type="range" max="360"/>
<input id="Y" type="range" max="360"/>

CSS

body{
    width:800px;
-webkit-perspective:500;
}

#cube{
    width:200px;
    height:200px;
    background:gray;
    margin:200px auto;
    -webkit-transform-style:preserve-3d;
    
}

#cube div{
    width:200px;
    height:200px;
    position:absolute;
    background:red;
    
}

#cube div:nth-child(2){
    background:green;
    -webkit-transform:rotateY(-90deg) translate3d(0,0,0);
}
#cube div:nth-child(3){
    background:yellow;
    -webkit-transform:rotateY(90deg) translate3d(100px,0,500px);
}
#cube div:nth-child(4){
    background:purple;
    -webkit-transform:rotateX(90deg) translate3d(0,-100px,100px);
}
#cube div:nth-child(5){
    background:blue;
    -webkit-transform:rotateX(90deg) translate3d(0,100px,100px);
}
#cube div:nth-child(6){
    background:orange;
    -webkit-transform:translateZ(200px);
}

JavaScript

$(function(){

    // modifier la perspective
    $('#X').change(function(){
        var val = $(this).val();
        //$('.perspText').html(val);
        $('#cube').css({WebkitTransform:'rotateX('+val+'deg)'});
    });
    $('#Y').change(function(){
        var val = $(this).val();
        //$('.perspText').html(val);
        $('#cube').css({WebkitTransform:'rotateY('+val+'deg)'});
    });
    
});