HTML and CSS Reference
In-Depth Information
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:
#x {
transform: perspective(250px) rotateX(10deg);
}
#y {
transform: perspective(800px) rotateX(10deg);
}
#z {
transform: perspective(2000px) rotateX(10deg);
}
These result in the different perspectives you see in
Figure 5.10
.
