Going Beyond with 3D Transforms - CSS3 Foundations - page 219

scaleZ() can be given only a number as its argument, which is a multiplication of an element's position on the Z
axis.
If you need to scale all three axes, rather than specify three separate functions, scaleX() , scaleY() , and
scaleZ() , you can use the function scale3d() , which takes three arguments: the X, Y, and Z values.
Multiple 3D Transform Functions
As with 2D transform functions, you can use as many as necessary by separating functions with a space, such as
transform: rotateY(-40deg) scaleZ(2) translateZ(100px);
Note that when you list transform functions in this way, a browser treats each as if it is specified separately in the
order listed. This effect is particularly important when you're using ScaleZ() . The Z axis must be scaled prior to
an element being translated on that axis. Therefore,
transform: rotateY(-40deg) scaleZ(2) translateZ(100px);
scales on the Z axis, whereas
transform: rotateY(-40deg) translateZ(100px) scaleZ(2);
doesn't scale on the Z axis.
transform-style
Initial value: flat | Inherited: No | Applies to: All elements with a display declaration relating to block, inline or
table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+
Prefixed browser support: Firefox 10+, Chrome 12+, Safari 4+
When an element is given a perspective declaration—making it a 3D space—only its direct child elements can
be manipulated in 3D. The sidebar, which is currently rotated in 3D, is the direct child of the main content container
<div id=”main” class=”group”> . Child elements of that sidebar are treated as having a transform-
style of flat . This is the reason you couldn't apply the translateZ() and scaleZ() functions only to the
newsletter box previously. With a transform-style of flat , the newsletter box wouldn't have been affected
by those transforms because it doesn't exist in a 3D space yet.
Now tell the browser that the sidebar should pass down its 3D space to its child elements (each <aside> element):
1. In the .sidebar rule set, add the following declaration:
-webkit-transform-style: preserve-3d;
2. Save styles.css.
By doing this, you can now manipulate the child elements of the sidebar in the same 3D space, something you
couldn't do before, and this is the reason you applied the 3D effects to the whole sidebar instead of just the
newsletter box.