HTML and CSS Reference
In-Depth Information
You can view an interactive demo of all of the CSS3 transformation effects in the
demo_transformations.htm
file in the tutorial.08/demo folder.
You can apply multiple
transformations by placing
the transformation effects
in a space-separated
list. Transformations are
applied in the order listed.
Rotating an Element
• To rotate a page element, apply the style
transform: rotate(
angle
);
where
angle
is the angle of rotation.
Each of the transformations was originally implemented as a browser extension. So to
create a cross-browser transformation, you should use the extensions for the Opera, Mozilla,
WebKit, and Microsoft browser engines before the application of the CSS3 style. You'll use
the
rotate()
function now to rotate the bottom two figures in Kevin's Web page.
To rotate a page object:
◗
1.
Return to the
effects.css
file in your text editor.
◗
2.
At the bottom of the file, insert the following style rule to rotate the figure box for
the lower-left photo 30° counter-clockwise:
/* Rotate styles */
figure#photo4 {
-o-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
◗
3.
Add the following style rule to rotate the figure box for the lower-right photo 30°
clockwise:
figure#photo5 {
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Figure 8-15 highlights the new style code.
