CSS 2D Rotation Transformations For Frontend Engineers

© 2 September, 2013, Martin Rinehart

CSS3 features 2D and 3D transformations. The 2D transformations include rotations.

Transformation Demonstrations

Most transformations do not work in IE8 or lower.

tfr-00

Start with a background div.

(Use JavaScript to decorate.)

tfr-01

Add a div, no transformations.

tfr-02

And then add transformations! (Specifics below.)

The transformations are 100% CSS, 0% JavaScript.

.tfr {
    background: #8080ff;
    height:     100px;
    left:       50px;
    position:   absolute;
    top:        50px;
    width:      150px;
}

All transform divs are class='tfr'.

2D Rotation Transformation (Around Center)

tfr-03

#tfr-03 {
    transform:         rotate( 30deg );
    -webkit-transform: rotate( 30deg );
}

-webkit- still needed for Chrome (1 Sept., '13).

tfr-04

#tfr-04 {
    transform:         rotate( -60deg );
    -webkit-transform: rotate( -60deg );
}

Angle: degrees clockwise.

2D Rotation Transformation (Specified Origin)

tfr-05

#tfr-05 {
    transform-origin:  0px 100px;
    transform:         rotate( 30deg );
    -webkit-transform-origin: 0px 100px;
    -webkit-transform: rotate( 30deg );
}

tfr-06

#tfr-06 {
        transform-origin:  100% 0%;
        transform:         rotate( -60deg );
        -webkit-transform-origin: 150px 0px;
        -webkit-transform: rotate( -60deg );
}

Feedback: MartinRinehart at gmail dot com

# # #