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.
