The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

3D Transformations 155

Before I move on, I want to make a slight digression. You may be won-

dering why the code contains so much repetition; why couldn’t I have done

something like this instead?

.d3-child { transform: rotateX(30deg) rotateY(45deg); }

.trans-1 { transform: perspective(20px); }

.trans-2 { transform: perspective(50px); }

.trans-3 { transform: perspective(1000px); }

The reason is if I don’t specify a function, its value is presumed to be

the default, so the values I set in the functions on the h1 element are effec-

tively overwritten by (the absence of) the functions in the subsequent styles.

I explained this in Chapter 12 in the section “An Important Note About

Transformation Functions.”

Translation Along the Axis

The translateX() and translateY() functions (and their shorthand, translate())

are used to move an element along its axis by a specified length in two

dimensions, but the move into a third dimension requires a new function:

translateZ(). The syntax is identical to its sibling properties:

E { transform: translateZ(length); }

The length value is any number with a unit of length. For example, to

move an element 30px along the z-axis (toward the viewer), use this:

E { transform: translateZ(30px); }

Now that you’ve met the new functions, let’s see them at work. In the

following example, I show two elements that are styled identically but for

different values for the translateZ() function:

 .trans-z1 { transform: translateZ(-40px); }

 .trans-z2 { transform: translateZ(40px); }

You can see the results in Figure 13-5—note that I’ve angled the parent

elements slightly and also made the elements transparent so you can more

easily see the effect. In the first example (, on the left), the translateZ()

function has a value of −40px, moving it negatively along the z-axis and

making it appear smaller than its parent. The next (, on the right) has a

value of 40px for translateZ(), moving it positively by that amount along the

z-axis and making it appear larger.

noTe This concept is much easier to grasp when you see the elements animated, so I once
more encourage you to look at the accompanying example files to get a better feel for
the way these functions behave.