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
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...