HTML and CSS Reference
In-Depth Information
.six {
transform: rotateX(-90deg) translateZ(100px);
background: rgba(34,34,34,0.5);
}
Finally, the whole cube is rotated in the z- and x-axes for artistic effect:
div.cube {
transform: rotateZ(-45deg) rotateX(45deg);
}
Wrapping your web page around a cube will certainly be
memorable for visitors, but be careful that you don't let your
snazzy CSS get in the way of them accessing your content.
Transforms come into their own when combined with
another new CSS3 feature: transitions. You'll learn
about transitions in the next section.
CSS transitions
A
transition
is a short animation between two element states, such as
activating a drop-down menu or closing a pop-up message. Instead of
having the elements immediately appear or disappear, the menu might
slide down, and the pop-up message could fade out. Such effects
