3D Transformations 161
right) example () has the same transformation origin on the x- and y-axes
(set with keywords rather than percentages) but it’s 50px along the z-axis—
that is, toward the viewer (as it appears).
Figure 13-9: Different transform-origin values on a transformed element
As before, you’ll see these differences much more clearly if you view
the example files, as you can see the elements actually rotate around their
transformation origin.
The transform-style Property
When elements transformed in 3D are nested, the default behavior is that
all descendant elements are flattened to the plane of the parent—that is,
any transformation functions applied to child elements are ignored. You
can change this behavior with a property called transform-style; here’s the
syntax:
E { transform-style: keyword; }
The keyword value can be either flat (the default) or preserve-3d.
Explaining the difference is easier if I start with an example: In this, I
have two elements with identical rules applied, except for the value given
to transform-style:
.trans-1 { transform-style: flat; }
.trans-2 { transform-style: preserve-3d; }
The difference, as shown in Figure 13-10, is quite stark: The example
on the left has the default value of flat, so the inner element is kept in
the same dimensional plane as its parent; you can clearly see the contrast
with the second example, which has a transform-style value of preserve-3d,
where the inner element sits in a separate plane, further along the z-axis
from its parent.
WArninG Internet Explorer 10 and 11 don’t support the preserve-3d value of this property.
