Rotate Elements with CSS Transformations
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);
Nice post
nice
nice
Wow!
Nice
Wow
soo good
good
Nice
r8
right
yes
good
nice