CSS 2D Scale Transformations For Frontend Engineers

© 2 September, 2013, Martin Rinehart

CSS3 features 2D and 3D transformations. The 2D transformations include scales (sizes).

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 Scale Transformations

tfr-07



#tfr-07 {
    transform:         scaleX( 1.2 );
    -webkit-transform: scaleX( 1.2 );
}

tfr-08



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

The scaleX() and scaleY() transforms work in IE 9 and IE 10. The scale() transform does not.

tfr-09



#tfr-09 {
        transform:         scale( 0.5, 2 );
        -webkit-transform: scale( 0.5, 2 );
}

tfr-10



#tfr-10 {
    transform-origin:  0 0;
    -webkit-transform-origin: 0 0;
    transform:         scale( 1.4, 1.4 );
    -webkit-transform: scale( 1.4, 1.4 );
}


Feedback: MartinRinehart at gmail dot com

# # #