It has been a while! My new job this past year has kept me very busy. I’ve used so many interesting CSS techniques in my job, that I want to start posting again to document them. I’m starting with CSS3 Transformations, which I’ve been wanting to write about for over a year.

The transform property allows you to apply transformations to objects on your page in the 2D space or 3D space.

You can change the scale of an object, rotate it flip it, for example. When combined with Transitions, you can create some very nice effects with CSS only.

    /* make something larger */
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);

    /* make something rotate */
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);    

The W3 documentation says that

A transformable element is an element in the HTML namespace which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’; or an element in the SVG namespace (see [SVG11]) which has the attributes ‘transform’, ‘patternTransform’ or ‘gradientTransform’.

I’ve tried to decipher this exactly, and the simple answer is that you can transform elements with are block-level, but not all inline elements. I’m not exactly sure what “atomic inline-level” means. An inline element like span does not take the transform property. However, if you change it to display: inline-block, it will transform. Images are inline, and they will transform. That is enough information for me to use this property.

The demo shows some simple transforms. I will be exploring this property in more depth when I have more time.

Browser Support

This is supported by all modern browsers, including IE9. IE8 and below do not support this property. Since transformations usually fall into the nice-to-have-but-not-necessary category, I generally don’t worry about earlier IE browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *