HTML and CSS Reference
In-Depth Information
figure 8-17
A 3D view of a page object
In addition to the three spatial axes, you specify the size of the
perspective
effect,
which is how rapidly objects appear to recede from or advance toward users for different
values of z. The lower the perspective value, the more extreme the distortion.
Figure 8-18 describes some of the 3D transformation functions supported under CSS3.
figure 8-18
css3 3D transformation functions
Transform Function
Description
translate3d(offX, offY, offZ)
Moves the object offX pixels horizontally, offY pixels vertically, and
offZ pixels along the z-axis
translateZ(offZ)
Moves the object offZ pixels along the z-axis
rotate3d(x, y, z, angle)
Rotates the object around the three-dimensional vector (x, y, z) at an
angle of angle
rotateZ(angle)
Rotates the object around the z-axis at an angle of angle
scale3d(x, y, z)
Resizes the object by a factor of x horizontally, a factor of y vertically,
and a factor of z along the z-axis
scaleZ(z)
Resizes the object by a factor of z along the z-axis
perspective(p)
Sets the size of the perspective effect to p
matrix3d(n, n, …, n)
Applies a 3D transformation based on a matrix of 16 values
For example, the following 3D transformation sets the perspective effect to 150 and
rotates the object 30° around the
x
-axis:
transform: perspective(150) rotateX(30deg)
Figure 8-19 shows how you can use the
perspective()
and
rotate3d()
functions
to create other effects in which an object appears to rotate toward or away from users.
