CSS 3D transformations
As you’ve probably already realized, a 3D transform allows us to manipulate an element in an imaginary 3D space. Let’s look at our first example. All we have in our example are two elements that each flip in 3D when hovered over. I’ve used hover here to invoke the flip, as it’s a simple mechanism to trigger the effect. However, the flipping action could just as easily be initiated with any other state change—a class change (via JavaScript) or when an element has received focus, for example.
The only difference between these two elements is that one flips horizontally and the other vertically. You can view them in a browser by opening example_11-05. Images fail to fully convey this technique, but the idea is that the element flips from the green “face” to the red “face,” giving the illusion of doing so through 3D space with the aid of perspective. Here’s a grab partway through the transition...