Alternative Units for CSS3 Rotation Transforms

A typical CSS3 rotate transform, with all the gory vendor details, looks like this:

.example {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

You’ll notice the unit being used to rotate this example element is the “degrees” unit, declared by appending the string “deg” at the end of the unit value.

But “degrees” isn’t the only unit available when rotating elements with transforms. You can also use other units, namely gradians, radians, and turns.

Gradians (grad)

Gradians (also referred to as “gons” or “grades”) are abbreviated using the string “grad” appended to the unit value. A full circle has 400 gradians, which would be the equivalent to 360 degrees. So converting our example from above to gradians would look like this (vendors omitted for all the rest of the examples):

.example {
	transform: rotate(400grad);
}

Because “400″ is a nice round number, it seems these units would be more intuitive for experimenting or could possibly make on-the-fly calculations a little easier.

Radians (rad)

A radian or “rad” unit is expressed like this:

.example {
	transform: rotate(6.2831853rad);
}

A full circle contains 2π radians. If you know what “π”, or “pi”, means, you’ll know that pi is equal to about 3.14, or more precisely 3.14159265. So that’s exactly half a circle in terms of radians. So we double that and we get 6.2831853rad to get a full circle.

So 6.2831853rad is equal to 400grad which is equal to 360deg. As you can see, radians are not as developer-friendly as gradians or even degrees.

Turns (turn)

A “turn” unit is exactly what it sounds like: One full circle. So the equivalent of what we’ve done above, using turn units, would be:

.example {
	transform: rotate(1turn);
}

So this unit is probably the most intuitive to use because it’s exactly what we want: one “turn” unit equals one full rotation.

Browser Support?

These alternate units (along with degrees) are all part of the angle CSS data type.

From my testing, the latest stable releases of Chrome, Safari, and Opera support all three units. Firefox supports gradians and radians, but not turns. Internet Explorer (tested up to IE10 PP2) doesn’t support any of these.

Update: As pointed out in the comments, the latest IE10PP supports all three units, and so does the latest
aurora build of Firefox.

I’ve created a demo page that rotates boxes on hover using these alternate units:

• View Demo

Source : http://www.impressivewebs.com/alternative-units-css3-rotate-transforms