HTML and CSS Reference
In-Depth Information
Initial value: none | Inherited: No | Applies to: All elements with a display declaration relating to block, inline or
table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+
Prefixed browser support: Firefox 10+, Chrome 12+, Safari 4+
In the preceding chapter, you used 2D transform functions such as translateX() , translateY() ,
scaleX() , scaleY() , and so on. When creating 3D transforms, you can use functions that control the Z axis
along with the X and Y axes.
translateZ() and translate3d()
Whereas the functions translateX() and translateY() move an element left and right and up and down, the
translateZ() function moves forward and back (toward and away from the viewer).
The following instructions are temporary, used to demonstrate translateZ() . If you'd like to follow them to ex-
periment in your own browser, note that the additional HTML and CSS will be removed afterward.
Place an empty <div class=”temp”></div> element immediately inside the main container <div
id=”main” class=”group”> and give it the following rule set:
.temp {
border: black solid 5px;
box-sizing: border-box;
position: absolute;
height: 100%;
width: 100%;
Temporarily remove the padding declarations from the #main rule set and make it position: relative;
so that the empty <div class=”temp”> becomes the same width and height, as shown in Figure 13-2.
Search WWH ::

Custom Search