Rotating Web Page Elements Using The CSS3 Rotate Transform

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:

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:

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:

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:

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:

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:

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.

SHARE THIS POST

ABOUT THE AUTHOR

Developer Drive is a quality Web development blog featuring tutorials, tips, news and reviews on things that matter to developers. We cover the latest trends and techniques such as CSS3, HTML5, WordPress, responsive/mobile design and much more.