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.