CSS 2D Transformations For Frontend Engineers

© 2 September, 2013, Martin Rinehart

CSS3 features 2D and 3D transformations. The 2D transformations include rotations, scales, skews and translations.

MSIE 8 does not do transformations. This page uses transitions to demonstrate transformations. MSIE9 does not do transitions.

-webkit-transition required to combine with -webkit-transform (17 Sept., 2013) All -webkit-xxx removed, 31 Oct., 2016.

2D Rotation Transformations

tfr-03

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

2D Scale Transformations

tfr-08

#tfr-08 {
        transform:         scaleY( 0.6 );
}

Opera bug if scaling during transition (17 Sept., 2013). Fixed 31 Oct., 2016.

2D Skew Transformations

tfr-11

#tfr-11 {
    transform:         skewX( 30deg );
}

2D Translation (Move) Transformations

tfr-17

#tfr-17 {
        transform:         translate( 50px, 25px );
}

MSIE does not support translate(x,y) (17 Sept., 2013). Not fixed, MSIE 11 on Win 7, 31 Oct., 2016.

Feedback: MartinRinehart at gmail dot com

# # #