Rotate Elements with CSS Transformations

in #html7 years ago

I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations allow us to rotate elements on a 360 degree axis. Rotating elements is a breeze too -- take a look.
The Mozilla CSS

-moz-transform:rotate(120deg);

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

-webkit-transform:rotate(120deg);

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

-o-transform:rotate(120deg);

Opera uses its standard o- prefixed property to signal the transform.
The Internet Explorer CSS

Microsoft has implemented a -ms prefix for the transform:

-ms-transform:rotate(120deg);

The CSS snippet above works well within IE9, but IE8 and lower require some filter magic:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);css-rotated.jpg