3D Transformations 159
The perspective and perspective-origin Properties
Earlier in the chapter, I introduced the perspective() transformation
function, but a perspective property is also available. The syntax is pretty
straightforward:
E { perspective: depth; }
The property operates in the same way as the function: The depth value
is a length unit that sets the distance from the element’s origin, z = 0. In fact,
the only difference between the function and the property is that the value
supplied to the property applies only to its child elements, not to itself.
The companion property of perspective is perspective-origin. This prop-
erty sets the point in 3D space from which you view the element. Here’s the
syntax:
E { perspective-origin: x-position y-position; }
The x-position value can be any one of the keywords—left, right, or
center—and the y-position value can be top, bottom, or center. Percentage or
length values can also be used. You should be familiar with these pairs of
values from using other properties, such as background-position or transform-
origin.
The default is center center (or 50% 50%), so you are viewing the line of
perspective as if it started at the absolute center of the element. Changing
the values of perspective-origin changes the origin of that line of perspective.
That may sound a little brain-bending; once again, showing it is easier
than explaining it. In this next example, I show the same transformed ele-
ment from different perspective origins. Here’s the code:
.d3-parent { perspective: 200px; }
.d3-child { transform: rotateX(45deg) rotateZ(90deg); }
.trans-1 { perspective-origin: left center; }
.trans-2 { perspective-origin: 100% 100%; }
.trans-3 { perspective-origin: 75% 25%; }
The examples are illustrated in Figure 13-8. A reference example is
shown first (at the far left); this is a transformed element viewed from the
default origin of center center. The second example () is the same ele-
ment but with perspective-origin at the center of the left-hand side of the
element. The angle you’re viewing the element from has changed; the view-
point appears to be to the left of the element. In the third example (),
I used length values of 100% 100%, which changes the origin to the bottom
of the right-hand side. The viewpoint appears to be to the right of the ele-
ment, looking up. The last (far right) example () is viewed from a point
75 percent along the x-axis and 25 percent along the y-axis; this example is
similar to the reference example, but the viewpoint has shifted slightly to be
just to the right of, and slightly above, the element.
