O'Reilly

Rotate Elements with CSS Transformations

By on  

CSS Transformations - Rotate

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);

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.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • MooTools Clipboard Plugin

    The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse....

  • MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

Discussion

  1. Nate

    I’d just like to point out that Opera supports -o-transform. It’s nice to have properties like this in CSS, even if it means retyping them three times just to get it to work cross-browser!

  2. Rich

    I generally use them as a hover event, normally with transitions as well. You can also use them to make carousel type effects – take a look at css3.bradshawenterprises.com/demos for two examples.

    The downside to using them for anything big is that in browsers with no support the effects don’t degrade nicely unless they are small (scale(1.05) on hover for instance).

    For an example not by me, panic’s blog makes pretty heavy use of them tok rotate each blog post slightly.

  3. Simon

    I tried to make some real nice post-it’s using CSS only. Gradients and shadow were great but the rotation has a real pain in the ass. Why ? Because all texts inside the rotated element are near to unreadable. I guess browsers still have to work on this one: rotating texts :/

  4. yeah, the text rotation stuff is really bad, does make it pretty unreadable at the moment. Even in the Webkit Nightlies it’s not ideal.

  5. jenny

    I’m doodling a JavaScript/mootools game of cards. thank you for this post – now I can fan the cards :D

  6. Not working with IE7

    we have to use this …

    progid:DXImageTransform.Microsoft.BasicImage(rotation=0)

    // rotation
    0 = 0º
    1 = 90º
    2 = 180º
    3 = 270º

    IE sucks!

  7. @duarte: Actually, check out http://css3please.com/ for a nicer IE-only alternative using a transformation matrix (look for the box_rotate section)

  8. http://moo4q.com !

    I use ’em there.

    As for IE DXImageTransform — it’s appearance is, shall we say, flippin’ ugly.

  9. pSouper

    does this mean you might be able to change pages by spinning the current page of the screen revealing the new page underneath (using ajax a of course)

  10. Ezra

    Any Idea howto apply this to an embedded youtube video? Any time ive tried it the Object refuses to display.

  11. Rakoda

    For rotation in older iE browsers you can better use the matrix transform filter.
    http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

  12. Josh

    The fractional rotation for IE mentioned here does not actually exists, only integers 0-3.

    To do a 45 degree, etc. rotation you have to use matrix translations…
    http://www.boogdesign.com/examples/transforms/matrix-calculator.html

  13. What about rotation and word wrapping the text at same time? I have a text that comes from DB. When the text is too long, one word stays over another. How to solve this?

    Thank you

  14. Brahim

    I am a complete noob. Do you think that this affect could be connected to a slider so that you could rotate the presentation in real time depending on the slider value? Could the content of the frame be a single image?

    • Honnza

      Sure. It can be done. Controlling the CSS style from javascript is easy (at least in jQuery). I have never built a custom slider, but I guess there are multiple ready-made solutions, including jQueryUI. In the worst case, you could kludge one from an overflowing div by listening to its scroll position.

  15. I’ve found that these CSS rules can be really flaky, seemingly insignificant changes can stop these working. Like a lot of devs I find it really useful to have a quick reference to help with my css rotation. Found this useful site which has a “copy and paste” code generator for CSS transform. http://www.cssrotate.com

  16. Hi,
    On this page:
    http://www.coursesweb.net/javascript/rotate-html-objects-div-span-image-jquery_t
    it is a tutorial about how to rotate Div, Images, and other HTML elements with jQuery, by any angle.
    Works also in IE 7+.

  17. When using css transformations it seems that when the page is printed, the transform is ignored.

    Any thoughts on this?

    Thanks,
    Scott

  18. Anuj

    Hi..
    This css is nt working on IE8 each of element..
    if you know the hack css plz tell

  19. Harpreet Singh Sahota

    Hello David,

    I was wondering how you able to rotate the social links 380deg:

    http://screencast.com/t/zpKWkwuLy3Y

    I copied the logic but it rotated slightly not as perfect as yours.
    I’ll be thankful if you clear this cloudy logic for me.

    Thanks
    @happysahota

  20. Shin

    IE Sucks, and Matrixes are awful, but there’s a way to make it dynamic passing degrees or radians using the function on this page. It doesn’t uses JQuery and its pretty well explained.

    http://kaisarcode.com/javascript-rotate

  21. If anyone is using ‘Font Awesome’ on their website – It is super easy to override their ‘fa-spin’ class to create your own infinitely rotating object.

    .fa-slow-spin {
    	animation: spin 10s infinite linear;
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Introducing Frontend Masters (with Giveaway)

    Hey DWB readers, I'm super happy to sponsor this blog. I've been a long-time reader and fan, since back when David wrote about JavaScript and MooTools back in 2007. ;-) We are in one of the fastest changing, evolving, most lively communities on earth: JavaScript and front-end web...

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...