3D perspective -> sliders JS

by iamvdo

HTML

<div id="div">
        <div class="un">pipo</div>
</div>

CSS

#div{
    width:800px;
    height:300px;
    margin:170px;
    background:green;
    -webkit-perspective:500px;
    -webkit-perspective-origin: 0% 50%;
    -moz-perspective:500px;
    -moz-perspective-origin: 0% 50%;
    -ms-perspective:500px;
    -ms-perspective-origin: 0% 50%;
}


.un{
width:300px;
    height:300px;
    margin:auto;
    background:red;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
}

JavaScript

$(function(){

    // modifier la perspective
    $('#persp').change(function(){
        var val = $(this).val()+'px';
        $('.perspText').html(val);
        $('#div').css({
            WebkitPerspective:val,
            msPerspective:val
        });
    });
    $('#persp2').change(function(){
        var val = $(this).val()+'px';
        $('.perspText2').html(val);
        $('#div2').css({
            WebkitPerspective:val,
            msPerspective:val
        });
    });
    
    //modifier l'origine de la perspective
    $('#perspOrX').change(function(){
        var val = $(this).val();
        $('.perspOrXText').html(val);
        $('#div').css({WebkitPerspectiveOriginX:val+'%'});
    });
    $('#perspOrY').change(function(){
        var val = $(this).val();
        $('.perspOrYText').html(val);
        $('#div').css({WebkitPerspectiveOriginY:val+'%'});
    });
    
    // modifier l'angle
    $('#angleY').change(function(){
        var val = $(this).val();
        $('.angleYText').html(val);
        $('#div div,#div2 div').css({
            WebkitTransform:'rotateY('+val+'deg'+')',
            msTransform:'rotateY('+val+'deg'+')'
        });
    });

});