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

156 Chapter 13

Figure 13-5: Translation in different directions along the z-axis

A shorthand function, translate3d(), is also available. This shorthand

allows you to set all three values simultaneously. The syntax is a logical

extension of the translate() function:

E { transform: translate3d(translateX,translateY,translateZ); }

Each of the arguments is equivalent to the named function, so each

accepts a numerical value, positive or negative, with a CSS length unit or

percentage, as shown here:

E { transform: translate3d( 0 ,100%,1em); }

Scaling

I also introduced the scale() function, along with the subfunctions scaleX()

and scaleY(), in Chapter 12. The move to three dimensions adds a new sub-

function, scaleZ(), which has this syntax:

E { transform: scaleZ(number); }

As with its siblings, the number value provides a factor to scale the ele-

ment by, so a value of 2 doubles the element’s size along the z-axis. The

resulting behavior is probably not what you’d expect, however; the element

itself has no depth, if you recall, so an increase in scaleZ() by itself doesn’t

seem to change the element. What the increase actually does is act as a

multiplier to any value that’s supplied to translateZ(). For example, consider

this code:

E { transform: scaleZ(3) translateZ(10px); }

The scaleZ() function’s value of 3 multiplies the translateZ f unct ion’s

value of 10px, so the element appears 30px (3 × 10px) along the z-axis.

In addition to scaleZ(), a new shorthand function, scale3d(), has also

been added. Here is its syntax:

E { transform: scale3d(scaleX,scaleY,scaleZ); }