HTML and CSS Reference
In-Depth Information
FIGURE 5.8
A 3D translation
in effect!
<div id=”wrapper”>
e >
e >
</div>
The wrapper
<div>
has
transform-style: preserve-3d;
and a 3D rotation
applied to it: You'll learn more about both later in the chapter. These are needed to
demonstrate the effect of 3D translations. The
#real
container has the following
transform applied to it:
article#real {
: ;
}
This produces the effect shown in
Figure 5.8
. The
#real
element appears to
have been moved 100 pixels in front of the
#ghost
element in the 3D space.
translate3D
produces a very similar effect to what you've already seen with
translation functions; however,
translate3D
allows you to translate elements
along the X, Y, and Z axes at the same time:
transform: translate3D(100px, 200px, 300px);
/* 100 pixels along the X axis, 200 pixels along Y, 300 pixels
p
along Z */
