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°
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.
Search WWH ::

Custom Search