One of the new features of CSS3 grabbed my attention was 3D transformations. Although I feel that animation should probably be more in the domain of JavaScript, some of the things that you can do with CSS3 transformations are pretty cool. Cool as it may be, 3D transformations with HTML isn’t always intuitive. Here I would like to explain a (seemingly) simple task: creating a turning page.
In order to understand CSS transformations, we first must take a look at traditional web page rendering. Let’s say we have 2 <div> elements, like so:
Both pages are displayed as if they are stuck to the screen with the text in a readable orientation.
Now, let’s decide that we want to add 3D transformations. If arbitrary rotations are possible, it would make sense that the traditional layout would be the default, with x-rotation = 0, y-rotation = 0, and z-rotation = 0. This is exactly how CSS3′s transformations were implemented. Now, if I rotate the first <div> by 180 degrees in the y direction, I would get this:
Notice that it looks just like it has been flipped horizontally. The text is backwards. The <div> hasn’t shifted left or right since the default axis of rotation is in the center of the HTML element. We can change that by using the transform-origin property. For example, if we style the first div with transform-origin: 100% 0%; then we end up with this layout:
The div is flipped, but this time it is flipped across its right side. So, this brings us to our task of creating a turning page.
In order to correctly animate and lay out your HTML, you have to remember that the default orientation is flat against the screen with readable text. This means that the front side of the page will be laid out exactly as you expect, but the back side of the page will have to be shifted left as many pixels as the page is wide. The front page will use its left edge as the axis of rotation while the back page will use its right edge as the axis of rotation. If this seems strange, examine a page of a book. Here’s a visual example:
Now, to complete the effect, the back side of the page must simply start out rotated -180 degrees. When you want to turn the page, all you have to do is:
- Rotate the front page from 0 to 180 degrees along the left edge
- Rotate the back page from -180 to 0 degrees along the right edge
Note that the back page starts out shifted one page’s width to the left so that the right edge of the back page is at the same location as the left edge of the front page.
This really answered my problem, thank you!