CSS 2D Translation Transformations For Frontend Engineers

© 2 September, 2013, Martin Rinehart

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

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 Translation (Move) Transformations

tfr-15



#tfr-15 {
    transform:         translateX( -30px );
    -webkit-transform: translateX( -30px );
}

tfr-16



#tfr-16 {
        transform:         translateY( -30px );
        -webkit-transform: translateY( -30px );
}

tfr-17



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

Feedback: MartinRinehart at gmail dot com

# # #