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

#css
7 years ago in #html by
$0.05
  • Past Payouts $0.05
  • - Author $0.05
  • - Curators $0.00
16 votes
Reply 23
Sort:  
  • Trending
    • [-]
     7 years ago  

    good activity

    $0.00
      Reply
      [-]
       7 years ago  

      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!

      $0.00
        Reply
        [-]
         7 years ago  

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

        $0.00
          Reply