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="pic1.jpg" alt="picture"/>
<img src="pic1.jpg" alt="picture" id="rotate30"/>
<img src="pic1.jpg" alt="picture" id="rotate60"/>
<img src="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="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.
You can see a demo of this tutorial here:
http://developerdrive.com/demo/demo/CSS_Rotate/css3_rotate.html
