2012-04-02

3d.css

#container{
    -webkit-perspective: 200px;
}
#stage{
    -webkit-transform-style: preserve-3d;
}
#shape{
    -webkit-transform-style: preserve-3d;
}
#panel{
    -webkit-transform-style: preserve-3d;
}​

jsfiddle.css

#container{
    margin: 100px 0 0 200px;
    
    width : 200px;
    height: 200px;
    display: block;
    border: #ccc 1px solid;
    
    -webkit-perspective: 200px;
}
#stage{
    -webkit-transform-style: preserve-3d;
}
#shape{
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(100px) rotateY(30deg);
}

#panel{
    width : 200px;
    height: 200px;
    display: block;
    background-color: blue;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(-250px);
}​

jsfiddle.html

<div id="container">
    <div id="stage">
        <div id="shape">
            <div id="panel"></div>
        </div>
    </div>
</div>

jsfiddle.js

(function(window, undefined) {
    var panel = window.document.getElementById('panel');
    panel.addEventListener('click', function(event) {
        console.log('clicked panel');
        event.preventDefault;
    }, true);

    console.log('starting..');
})(window);​