With CSS3, you can rotate Web page elements by a specified
number of degrees, clockwise or anti-clockwise. With a small amount of
HTML and JavaScript code in conjunction with CSS declarations, you can
also animate these rotations. In this tutorial we will work through the
process of rotating an image element by varying amounts as well as
animating the function, initiating the rotation on user interaction with
the page.
Create a Page
Save a new HTML file in your chosen editor, using the following outline code for HTML5:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*style declarations*/
</style>
</head>
<body>
<!--page element markup-->
</body>
</html>
We will add the page elements in the body and the rotation style declarations within the dedicated CSS section in the page head.
Add Images to the Page
Add one or more images to your page. To demonstrate multiple amounts
of rotation in CSS3, we can include the same image element multiple
times, as follows:
<div class="pics">
<img src="/img_articles/21749/pic1.jpg" alt="picture"/>
<img src="/img_articles/21749/pic1.jpg" alt="picture" id="rotate30"/>
<img src="/img_articles/21749/pic1.jpg" alt="picture" id="rotate60"/>
<img src="/img_articles/21749/pic1.jpg" alt="picture" id="rotate90"/>
</div>
Alter the image source attributes to suit an image file of your
choice. The first image will be displayed as normal, with the remaining
three displaying varying degrees of rotation. Notice that each image to
be rotated has a unique ID attribute, so that the CSS code can identify
it in order to apply the transform effect.
Style the Elements
Within your style section, add the following default styling declarations:
img {
float:left;
margin:50px;
}
.pics {
clear:both;
}
This styling will apply to all of the relevant page elements
independently of any transform effects. Depending on the dimensions of
your own image elements, you may need to alter the margin declaration so
that the full image is still visible within the page after rotation.
Rotate the Image Elements
Add the following declaration to apply a rotate transform to the image element in your page with "rotate30? as its ID:
/*rotate 30 degrees*/
#rotate30 {
/*General*/
transform: rotate(30deg);
/*Firefox*/
-moz-transform: rotate(30deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(30deg);
/*Chrome, Safari*/
-webkit-transform: rotate(30deg);
/*Opera*/
-o-transform: rotate(30deg);
/*alter opacity*/
opacity:0.8;
filter:alpha(opacity=80);
}
This section applies to one of the image elements you added,
identifying the correct element using its unique ID attribute. To
implement the rotation for the other two image elements, extend the code
as follows:
/*rotate 60 degrees*/
#rotate60 {
/*General*/
transform: rotate(60deg);
/*Firefox*/
-moz-transform: rotate(60deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(60deg);
/*Chrome, Safari*/
-webkit-transform: rotate(60deg);
/*Opera*/
-o-transform: rotate(60deg);
/*alter opacity*/
opacity:0.6;
filter:alpha(opacity=60);
}
/*rotate 90 degrees*/
#rotate90 {
/*General*/
transform: rotate(90deg);
/*Firefox*/
-moz-transform: rotate(90deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(90deg);
/*Chrome, Safari*/
-webkit-transform: rotate(90deg);
/*Opera*/
-o-transform: rotate(90deg);
/*alter opacity*/
opacity:0.4;
filter:alpha(opacity=40);
}
The images are going to rotate by 30, 60 and 90 degrees. As you can
see, the basic syntax for the rotate transform is as follows:
transform: rotate(90deg);
In reality, the rotate transform syntax needs to be tailored to the
user's browser, with slightly different prefixes to suit each browser
type that supports the effect. For demonstration, the code also applies
different alpha transparency values to the image elements, in the last
two style declarations within each block, also catering to different
browsers. Open your page in a Web browser to see the different
rotations.
Create an Interactive Image
Next let's make the image interactive so that we can add a level of
animation to the page. Add the following after the existing "div"
element in your page:
<div class="pics">
<img src="/img_articles/21749/pic1.jpg" alt="picture" id="spin" onclick="this.className='spinning'"/>
</div>
This image element has a click event listener attribute. When the
user clicks the image, a small excerpt of JavaScript code gives it a new
class name. We are going to add CSS declarations for that class name so
that the element will be transformed when the user clicks it. Notice
that the image element also has an ID attribute, which we will use to
apply default styling to it.
Rotate the Image Anti-Clockwise
This time we will rotate the image in an anti-clockwise direction
rather than clockwise as in the previous example. We do this by
supplying a negative parameter to the rotate transform. Add the
following style declarations to your CSS code:
.spinning {
/*General*/
transform: rotate(-360deg);
/*Firefox*/
-moz-transform: rotate(-360deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(-360deg);
/*Chrome, Safari*/
-webkit-transform: rotate(-360deg);
/*Opera*/
-o-transform: rotate(-360deg);
/*alter opacity*/
opacity:0.0;
filter:alpha(opacity=0);
}
When the image element rotates, it is also going to gradually change
to zero alpha transparency, so it will effectively disappear as it
spins. To apply a transition to the effect, add the following CSS:
#spin {
/*general version*/
transition: 2s;
/*browser specific versions*/
-moz-transition: 2s;
-ms-transition: 2s;
-webkit-transition: 2s;
-o-transition: 2s;
}
This instructs the browser to make the rotation last 2 seconds, so
that you can see the effect unfolding. You can add more advanced
transitions such as easing if that suits your project. The image is
going to rotate the full 360 degrees anti-clockwise as it vanishes. Open
your page in a CSS3 supporting browser to see the effect when you click
the image.
Conclusion
There can be little doubt about the increasing possibilities CSS3
brings to developers. However, at this stage you unfortunately do need
to remember those users whose browsers are not quite ready to support
these new effects yet, as full support is not going to happen any time
soon.
