HTML and CSS Reference
In-Depth Information
For this trick, you need to add an
extra <div> to the markup to pre-
serve the direction of the content
in the top face:
.cube div:nth-child(1) div,
.cube div:nth-child(2),
.cube div:nth-child(3) {
padding: 10px;
width: 180px;
height: 180px;
}
.cube > div {
position: absolute;
}
.cube div:nth-child(2) {
transform: skewY(30deg);
background-color: #444;
}
.cube div:nth-child(3) {
transform: skewY(-30deg);
background-color: #666;
left: 200px;
}
.cube div:nth-child(1) div {
transform:
skewY(-30deg) scaleY(1.16);
background-color: #888;
font-size: 0.862em;
}
.cube div:nth-child(1) {
transform: rotate(60deg);
top: -158px;
left: 100px;
}
<div class="cube">
<div>
<div>One</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
The faces are then skewed by 30
or -30 degrees and positioned so
the edges line up. Colors are set
on each face individually to
enhance the perception of depth.
See the blog post “ 3D Cube using
2D CSS transformation” by Paul
Hayes for a full explanation of
this technique: www.paulrhayes
.com/2009-04/3d-cube-using-
c ss-transformations/ .
 
Search WWH ::




Custom Search