Rotate Elements with CSS Transformations
The Mozilla CSS
The CSS property is denoted as Mozilla-only with the "-moz" prefix. You can rotate your element any number of degrees. You may also use the "moz-transform-origin" property to set an origin for the transformation:
-moz-transform:rotate(120deg); -moz-transform:skewx(25deg) translatex(150px);
The WebKit CSS
Obviously WebKit uses the "-webkit" prefix. The transformation syntax, however, is the same. WebKit originated CSS transformations; Mozilla implemented the WebKit standard.
The Opera CSS
Opera uses its standard
o- prefixed property to signal the transform.
The Internet Explorer CSS
Microsoft has implemented a
-ms prefix for the transform:
The CSS snippet above works well within IE9, but IE8 and lower require some
Unfortunately these filters are very inexact and wont be reliably rotated.
That's about it. CSS transformations are not new but it's good to review them every once in a while. To this day I've not used CSS transformations on a project in production. Maybe you have a good example of modern CSS transformation usage you can share?
* Note: I did notice that WebKit has problems supporting rotated iFrame's. Mozilla did just fine.