2012-04-02_branch01

perspective1.css

#container{
    margin: 50px 0 0 200px;
    
    width : 200px;
    height: 200px;
    display: block;
    border: #ccc 1px solid;
    
    position: relative;
    -webkit-perspective-origin-x: 100px;
    -webkit-perspective-origin-y: 100px;
    -webkit-perspective: 180;
}
#stage{
    -webkit-transform-style: preserve-3d;
}
#shape{
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(180px) rotateY(180deg);
}

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

perspective2.css

#container{
    margin: 50px 0 0 200px;
    
    width : 200px;
    height: 200px;
    display: block;
    border: #ccc 1px solid;
    
    position: relative;
    -webkit-perspective-origin-x: 100px;
    -webkit-perspective-origin-y: 100px;
    -webkit-perspective: 180;
}
#stage{
    -webkit-transform-style: preserve-3d;
}
#shape{
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(179px) rotateY(180deg);
}

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