3D Transformations 151
Illustrating three-dimensional transformation concepts on the printed
page is quite hard, so I strongly suggest you take a look at the examples on
the website that accompanies this book (http:/www.thebookofcss3.com/); I’ve
added transition rules to some of the examples so they animate when you
interact with them, showing more clearly the three-dimensional effects that
are difficult to convey in a two-dimensional book. These examples should
aid your understanding of some of the techniques used in this chapter. I
also recommend the test page put together by the team at Westciv (http ://
http://www.westciv.com/tools/3Dtransforms/). This site allows you to try out differ-
ent combinations of transformation values to see the effect they have on
elements.
Before I introduce the new and extended transformation properties, a
quick note about the examples being used in this chapter. Although each
example may employ different classes to apply unique style rules, all of the
examples use the same basic markup:
<div class="d3-parent">
<div class="d3-child">
<h2>The Book Of</h2>
<h1>CSS3</h1>
</div>
</div>
Most of the transformation work is performed on the .d3-child ele-
ment, although a few properties must be applied to a parent, which is why I
also have the .d3-parent element. I’ll be clear about whether properties are
applied to parents or children as I go through the chapter.
The Transformation Functions
In Chapter 12, I introduced the transform property and its associated func-
tions, for use in two-dimensional transformations. Three-dimensional trans-
formations use the same property and many of the same functions, but also
extend some of those functions and add some entirely new ones. I’ll explain
each of the transformation functions in turn and note whether they are com-
pletely new or extend the existing 2D transformation properties that I have
already discussed. Note that the transform property is always applied to the
child element (.d3-child in the example markup).
Rotation Around an Axis
I’ll begin explaining the 3D transformation functions as I did the 2D
functions—with rotation. Two-dimensional space has only one axis to
rotate around, so the rotate() function requires only a single value. But
when you’re dealing with three dimensions, you’ve got three axes to rotate
around and, therefore, three properties to control this.
