HTML and CSS Reference
In-Depth Information
FIGURE 5.8 A 3D translation
in effect!
<div id=”wrapper”>
e >
e >
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 */
Search WWH ::

Custom Search