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

160 Chapter 13

Figure 13-8: Different values for the perspective-origin property

The Transformation Origin

When explaining 2D transformations in Chapter 12, I talked about each ele-

ment’s origin point—the point at which all transformations are applied—

and how you can set its position using the transform-origin property. The

same property is also used for setting the origin point of 3D transforma-

tions, but as three dimensional coordinate systems have three axes (x-axis,

y-axis, and z-axis), the property also accepts three values:

E { transform-origin: x y z; }

The first two values, x and y, act the same as in the transform-origin

property for 2D elements; that is, they accept values as either a keyword

(left, right, center for x, and top, bottom, center for y), a length unit, or a

percentage. The default value is center center, or 50% 50%. The third value, z,

is a length value, which sets the distance along the z-axis that the transfor-

mation will happen. This value can seem quite counterintuitive as it seems

to act in reverse; if a negative value is given, the transformation origin is

behind the element, which makes it appear in front of its parent; likewise, a

positive value places the origin in front of the element, making the element

appear behind its parent.

I’ll illustrate this with a demonstration showing three elements iden-

tical in all values but transform-origin. Here’s the relevant code for these

examples:

.d3-child { transform: rotateX(45deg) rotateZ(90deg); }

 .trans-1 { transform-origin: 50% 0 0; }

 .trans-2 { transform-origin: 50% 100% 0; }

 .trans-3 { transform-origin: center bottom -50px; }

You can see the output in Figure 13-9. From left to right, the first

example is, once again, a reference element, with the origin at its default

position, dead center. The next () shows the same element with the

transform-origin value set to the center of the top side, and in the original

(unchanged) position on the z-axis. The third example () sets the trans-

formation origin to the center-bottom of the element, and the final (far