Rotate Elements with CSS Transformations

in html •  7 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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Nice post

nice

nice

Wow!

Nice

Wow

soo good

good

Nice

r8

right

yes

good

nice

good activity

wow

osam

Congratulations @bestseetozenith! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Nice

nice

Nice

nice

Great artical, thank you very much for sharing this awesome post with u