Surfin' Safari

CSS Transforms

Posted by Dave Hyatt on Friday, October 26th, 2007 at 12:47 pm

WebKit now has rudimentary support for specifying transforms through CSS. Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.

A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box). The supported primitives are:

scale, scaleX, scaleY – Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
rotate – Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).
translate, translateX, translateY – Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.
skew, skewX, skewY – Skew an object. These functions take CSS angles.
matrix – Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.

In addition to the -webkit-transform property, we have introduced a -webkit-transform-origin property that allows you to specify the origin of the transform. It has the same syntax as background-position and defaults to the center of the object (so that scales and rotates will be around the center of the border box by default).

At the moment transforms do not affect layout, so they are similar to relative positioning in that respect. We are exploring ideas for how to do transforms in ways that could affect layout.

32 Responses to “CSS Transforms”

  1. cleverdevil Says:

    Awesome, do you have any examples of what this can do? I’d really like to try it out.

    Next project suggestion: a plugin for Firefox and Internet Explorer that lets me use WebKit as the rendering engine instead :) Then I can use all these fancy new things you guys are adding in my web applications!

  2. Fyrd Says:

    Is this intended to be put in the CSS3 spec at all? I heard talk obout introducting a rotation option, but this certainly goes a step further. Quite unexpected, but very cool!

  3. hyatt Says:

    This is basically taking what the CSS WG had in its current draft (a rotation property and rotation-point property) and generalizing it (to a transform property and a transform-origin property).

  4. cleverdevil Says:

    Also, can I access these properties from JavaScript?

  5. hyatt Says:

    You can set them via .style etc. I haven’t implemented getComputedStyle yet for them though.

  6. cleverdevil Says:

    I figured it out:

    element.style.webkitTransform = ‘rotate(45deg)’;

    It draws with all sorts of artifacts when I do it this way though. I am sure it’ll get better as the feature gets some more work. I was wanting to write a little JS that would animate elements using this functionality, but I think I’ll wait a few more weeks first!

  7. hyatt Says:

    Actually any test cases you have that are buggy, you should attach to bugs and file.

  8. mdaines Says:

    This is probably not the most productive use of this feature, but: http://picknewtemplate.blogspot.com/2007/10/webkit-gets-element-transforms.html

  9. Pingback from Bram.us » CSS Transforms: Rotate, Scale, Translate, Skew, …:

    [...] The webkit team is on a roll with the CSS Transforms … not the last paragraph (At the moment transforms do not affect layout, so they are similar to relative positioning in that respect. We are exploring ideas for how to do transforms in ways that could affect layout.) and then read bullet #3 of the first question of the interview with the CSS3 team. Still lots of work ahead, but if one vendor is pioneering, the rest will hopefully follow … Spread the word! [...]

  10. Pingback from Heraclitean Fire — Links:

    [...] Surfin’ Safari – Blog Archive » CSS Transforms Just a quick geeky moment. This is seriously cool: ‘WebKit now has rudimentary support for specifying transforms through CSS. Boxes can be scaled, rotated, skewed and translated.’ Hello, vertical text. (tags: Safari webkit CSS) daily links | 27 October 2007 at 9:23 am | RSS « Links [...]

  11. Pingback from Dylan Schiemann » Blog Archive » some of svg comes to css:

    [...] the WebKit blog, Dave Hyatt announced that WebKit now has support for CSS Transforms. This is really interesting because it takes the matrix transformation possibilities from SVG, and [...]

  12. RichB Says:

    Coverflow in HTML. Here we come!

  13. Pingback from Alp Toker » Blog Archive » GTK+ Matters:

    [...] it can render that “Hello” button correctly. It also supports a bunch of fancy features from HTML5 and CSS3 that Gecko does not and loads pages faster before optimisation work has even [...]

  14. Pingback from Ajaxian » Webkit CSS Transforms:

    [...] now has CSS Transforms: Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine [...]

  15. ChrisJay Says:

    Awesome, simply awsome.

    Two thoughts:
    a) how about adding a CSS “transformable” property, for the browser user interface to allow me to rotate / skew / transform an element (similar to CSS “resize”)
    b) how about re-using other parts of the SVG spec, e.g. adding a new “gradient” color to CSS3 Colors, allowing things like
    background-color:gradient(red 0%, green 100%). After all, presumably you’ve already written much of the code to support SVG :)

  16. Zach Says:

    @RichB Re: coverflow

    It doesn’t look like any perspective transformations are possible. The affine matrix and the other operations keep the parallel sides of a box parallel.

    You can kind of fake 3D, but you can’t make the leading edge bigger than the trailing edge like you’d expect in a 3d perspective:

    http://tech.no.logi.es/woodshop/3d.html

  17. Pingback from Javascript News » Blog Archive » Webkit CSS Transforms:

    [...] now has CSS Transforms: Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine [...]

  18. Pingback from F-LOG-GE » Blog Archive » Safari mit neuen Spielereien:

    [...] Safari-Programmierer rühmen sich, “CSS-Transformationen” eingebaut zu haben. Die Eigenschaft heißt -webkit-transform und kann ein Objekt rotieren, [...]

  19. hyatt Says:

    Zach, perspective transforms aren’t implemented (yet).

  20. marcus erronius Says:

    for a quick example, click here: rotate page

  21. marcus erronius Says:

    *sigh*… or not. I should have known javascript links would not be allowed.

  22. Pingback from Webkit introduce more new features - CSS3 . Info:

    [...] Transformations, via the -webkit-transform property, allow you to scale, rotate and skew block elements; reader Ain Tohrvi has put together an impressive test suite. At the moment this property doesn’t affect layout, so behaves more like a relatively positioned element. [...]

  23. Aaron Gustafson Says:

    It’s like you read my mind (or my blog post, which apparently revived the rotation topic after it languished for a while at the W3C).

  24. Brad Says:

    I tried to rotate some table header cells (TH’s in a THEAD), but it didn’t turn out so well. Seems like they cannot be relatively positioned or have widths different from the rest of the table, and they always appear in front of the rest of the table. If anyone else has had better luck doing that sort of thing, I would like to see it. I also couldn’t do skew or scale on the TH.

  25. Brad Says:

    I put together a table with rotated headers (http://bradclicks.com/CSSTransformTest.html) that looks halfway decent in Webkit, but the headers disappear in FireFox. I had to use spans within the table header cells. It would be nice if something like -webkit-transform:rotate would have special meaning for TH, so that it would just do this sort of thing on its own.

    I couldn’t get skew to work though. Maybe I am doing something wrong.

  26. Pingback from OpenLaszlo Project Blog » The DHTML runtime now supports rotation in Webkit:

    [...] Thanks to Jim Grandy and http://www.cuppadev.co.uk/2007/10/31/rotating-openlaszlo-with-webkit/ for pointing out that webkit, aka Safari now supports rotation via CSS: http://webkit.org/blog/130/css-transforms/ [...]

  27. Pingback from Surfin’ Safari - Blog Archive » Ten New Things in WebKit 3:

    [...] in the latest development trunk of WebKit – features like web fonts, client-side database storage, CSS transforms and CSS animation. These features will likely make it to a Safari release someday. But I’d [...]

  28. Pingback from Runtime wars (2): Apple’s answer to Flash, Silverlight and JavaFX « counternotions:

    [...] rotated, skewed and translated, with timings for fades, rotation, expansion, collapses, etc. Hyatt: …transitions are for basic implicit animations. We will also be introducing explicit [...]

  29. guido.grassel Says:

    @hyatt: Is there any place (other than maybe the sources) where I can find what is expected to work in WebKit already? – I found translate, skew, scale to work for me, but not translateX/Y, skewX/Y, scaleX/Y. Also not sure about matrix.

  30. guido.grassel Says:

    Cool stuff. This would benefit from formal specification in the W3C CSS working group, I believe.

  31. testman Says:

    Any plan for webkit to join and implement the BeCSS spec (see http://www.w3.org/TR/becss/ ) from W3C ? IE already have old BeCSS support and Gecko have also draft version implemented. BeCSS enable advanced styling to be done on a webpage. This mean, you can add behavior “per styling” instead of poluting the XHTML code with tons of .js to do fancy stuff or ajaxian stuff. Having BeCSS in Webkit would help us to bring more clean advanced webapplications by decoupling data structure (XHTML) and “look and feel” (CSSwithBeCSS).

    Any plan ?

  32. Pingback from SitePen Blog » Blog Archive » Standards and Recommendations:

    [...] Apple has started pushing the envelope with recent additions to WebKit. For example, because they have a great SVG implementation, they have proposed a great way to use CSS to get some of the great benefits of SVG transformations with HTML elements. [...]