css3 transform-style: preserve-3d

by noahua

HTML

<div class="container">
    <div class="transformed">
        <div class="child"></div>
    </div>
</div>

CSS

div {
    height: 150px;
    width: 150px;
}
.container {
    -webkit-perspective: 500px;
    border: 1px solid black;
}
.transformed {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(50deg);
    background-color: blue;
}
.child {
    -webkit-transform-origin: top left;
    -webkit-transform: rotateX(40deg);
    background-color: lime;
}