3D CSS Perspective

3D CSS Perspective

by Fobos Deimos

HTML

<div id="cont">
<div id="a">
    <div id="b">
        I am the parent, and have perspective.
        <div id="c">
            I stand out from my parent element.
        </div>
    </div>
</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
        -webkit-perspective: 500;

}

#cont {
    background: #ccc;
    width: 280px;
    height: 280px;
    overflow: hidden;

}

#a {
    margin: 40px;
    transform-style: preserve-3d;
    transform: rotateX(-40deg);
}

#b {
    height: 200px;
    width: 200px;
    text-align:center;
    border: solid 1px red;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-40deg);
}

#c {
   
    border: dotted 1px blue;
}

JavaScript

var cont = $('cont'), a = $('a'), b = $('b'), c = $('c');

cont.addEvents({
    mouseenter: function(){
        c.style.WebkitTransform = 'translateZ(0em)';
    },
    
    mouseleave: function(){
        c.style.WebkitTransform = 'translateZ(3em)';
    },
    
    mousemove: function(e){
        console.log(e.client.x-140, e.client.y-140);
        
        a.style.WebkitPerspective = e.client.x-140;
    }
});