HTML and CSS Reference
In-Depth Information
Applying 3-D and 2-D transformations
Using CSS you are also able to apply transformations to elements on your webpage. In
this section, you will review how to apply three dimensional transforms to your elements.
Following with the same div from the previous section, you will apply the three-dimensional
(3-D) transformations listed in Table 4-11. Two-dimensional (2-D) transforms are covered in
Objective 1.3, “Apply transforms.”
TABLE 4-11
Three-dimensional transformations
Transformation
Effect
Moves the object from its current location to a new location
translate
Changes the size of the object
scale
Spins the object along the x-axis, y-axis, and/or the z-axis
rotate
Allows you to combine all the transformations into one command
matrix
As you can see, the 3-D transforms are the same property values as the 2-D transforms.
The addition is that each property now allows you to invoke the transform across the z-axis
instead of just the x-axis and y-axis. In addition, there are shorthand properties available such
as translate3d and rotate3d .
To demonstrate the use of a 3-D transform, you will look at the rotate transformation. The
following code applies a 3-D rotation of the div element.
div {
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}
When the page loads, all div elements on the page will be rotated 30 degrees along each
axis. The above transform could be expressed in this way as well:
transform: rotate3d(1,1,1, 30deg);
In this case, rotate3d takes the first parameters to specify on which axis to rotate. A value
of zero indicates to no rotation on that axis whereas a value of 1 indicates a rotation on that
axis. The parameters are in order of x-axis, y-axis, z-axis. The last parameter specifies the
number of degrees to rotate.
When the page loads, you will see the output in Figure 4-49.
 
 
Search WWH ::




Custom Search