CSS3 2D Skew Transformations For Frontend Engineers

© 2 September, 2013, Martin Rinehart

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

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'.

Skew Transformations

tfr-11

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

tfr-12

#tfr-12 {
        transform:         skewY( -15deg );
        -webkit-transform: skewY( -15deg );
}

The skewX() and skewY() transforms work in IE 9 and IE 10. The skew() transform does not. MDN (Mozilla) notes that skew() was removed from the draft specification and should not be used. skew() is in the latest W3C Transforms working draft which notes that it is not the same as applying skewX() and then skewY().

tfr-13

#tfr-13 {
        transform:         skew( -45deg, -15deg );
        -webkit-transform: skew( -45deg, -15deg );
}

tfr-14

#tfr-14 {
    transform-origin:  100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform:         skew( -45deg, -15deg );
    -webkit-transform: skew( -45deg, -15deg );
}

When working with inverse trigonometric functions (e.g., Math.atan()) it may be easier to work with angles measured in rad than in deg.

Feedback: MartinRinehart at gmail dot com

# # #