HTML and CSS Reference
FIGURE 5.10 The effect
of different perspective
transform values on a
simple rotateX transform.
Let's first look at the perspective function. Open the perspective-transform.
html file in the code download folder. It contains three copies of an example con-
tainer; they all have a transform of rotateX(10deg) applied to them, which gently
transitions to rotateX(30deg) on hover/focus. The difference between them is
that different amounts of perspective are applied to each one. Their default states
are as follows:
transform: perspective(250px) rotateX(10deg);
transform: perspective(800px) rotateX(10deg);
transform: perspective(2000px) rotateX(10deg);
These result in the different perspectives you see in Figure 5.10 .