CSS Transforms | CSS: Presentation Layer

Standards Based Development

Transforms Rotating Elements Units

Degreess (degs) Unit

Gradians (grad) Unit

A full circle has 400 gradians, the equivalent to 360 degrees.

Radians (rad) Unit

A full circle radian 2π radians, where π is half a circle...duh.

Turns (turn) Unit

A turn is one full circle.

Examples

The following declaration blocks all say the same thing:

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

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

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

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

Alternative Units for css3 Rotation Transforms

Hands on 3D Transforms in ie

transform generator tool, built for Internet Explorer.