Chat with us, powered by LiveChat
Using CSS 3 to rotate images on hover

Using CSS 3 to rotate images on hover

CSS 3 Featured Image

While many of the new features found in CSS 3 are still in Candidate Recommendation stage, many websites make use of some of the most popular new features in CSS 3 like transitions, gradients and rounded corners, to provide a better user experience for website visitors. All the major Web browsers apart from Internet Explorer have long implemented many of the top new features found in CSS 3, but only newer versions of Internet Explorer support many of the more common CSS 3 properties.

Using CSS for smooth image rotations

First, browser support: the rotation itself is supported in Firefox 3.5 and above, Chrome 4 and above, Safari 3.1 and above, IE 10 and above and Opera 10.5 and above. However, for the transitional rotation, only IE 11 and above support this so IE 10 users will not experience the smooth rotation of the image (will be immediate instead). Some older versions of these browsers do not support the property name that is set to become part of the CSS 3 specification and instead use a vendor prefix (e.g. -moz-transform). In these situations, the vendor prefix will be recognised by the older browser instead and all other unrecognised properties will be ignored.

So to get started, I’ll be using an image of a tux (forgive me, I’m quite a Linux fan ;-)). First, let’s construct the code that will be for the image itself:

CSS code:

div {
width: 227px;
height: 268px;
background: url(‘tux.png’) no-repeat;
-webkit-transition: all 400ms ease 0s;
-moz-transition: all 400ms ease 0s;
-ms-transition: all 400ms ease 0s;
-o-transition: all 400ms ease 0s;
transition: all 400ms ease 0s;
}

HTML code:

<div></div>

In the CSS code you’ll notice the properties used for the transition. This is to instruct the browser to rotate the image gradually. The vendor-specific properties work in the same manner as the real thing, and is the short-hand version which equates to this:

transition: property duration timing delay

  • property: this is what property you want the transition to be for, in the case above I could replace “all” with “transform”
  • duration: how long the complete transition lasts for
  • timing: allows you to manipulate the speed of the transition at different stages (e.g. “ease-out” would make the transition slower at the end)
  • delay: defines when the transition will start

Next, you need to add the CSS code that rotates the image on hover:

div:hover {
cursor: pointer;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg)
}

As you might guess, the -5deg means it will be rotated 5 degrees towards the left.

To view the full code (including the HTML), download it here.

Ben Stones

Sharing

Leave your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.