CSS Transforms
Posted by Dave Hyatt on Friday, October 26th, 2007 at 12:47 pmWebKit 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.
October 26th, 2007 at 1:04 pm
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!
October 26th, 2007 at 1:10 pm
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!
October 26th, 2007 at 1:15 pm
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).
October 26th, 2007 at 2:16 pm
Also, can I access these properties from JavaScript?
October 26th, 2007 at 2:32 pm
You can set them via .style etc. I haven’t implemented getComputedStyle yet for them though.
October 26th, 2007 at 2:38 pm
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!
October 26th, 2007 at 3:33 pm
Actually any test cases you have that are buggy, you should attach to bugs and file.
October 26th, 2007 at 5:29 pm
This is probably not the most productive use of this feature, but: http://picknewtemplate.blogspot.com/2007/10/webkit-gets-element-transforms.html
October 26th, 2007 at 7:12 pm
[...] 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! [...]
October 27th, 2007 at 2:23 am
[...] 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 [...]
October 27th, 2007 at 11:58 pm
[...] 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 [...]
October 28th, 2007 at 1:10 am
Coverflow in HTML. Here we come!
October 29th, 2007 at 1:16 am
[...] 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 [...]
October 29th, 2007 at 8:43 am
[...] now has CSS Transforms: Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine [...]
October 29th, 2007 at 9:16 am
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
October 29th, 2007 at 11:40 am
@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
October 29th, 2007 at 1:03 pm
[...] now has CSS Transforms: Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine [...]
October 30th, 2007 at 12:30 am
[...] Safari-Programmierer rühmen sich, “CSS-Transformationen” eingebaut zu haben. Die Eigenschaft heißt -webkit-transform und kann ein Objekt rotieren, [...]
October 30th, 2007 at 10:49 am
Zach, perspective transforms aren’t implemented (yet).
October 30th, 2007 at 4:05 pm
for a quick example, click here: rotate page
October 30th, 2007 at 4:06 pm
*sigh*… or not. I should have known javascript links would not be allowed.
October 31st, 2007 at 2:48 am
[...] 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. [...]
October 31st, 2007 at 2:23 pm
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).
November 3rd, 2007 at 7:40 pm
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.
November 3rd, 2007 at 8:44 pm
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.
November 8th, 2007 at 12:10 pm
[...] 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/ [...]
November 15th, 2007 at 4:45 am
[...] 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 [...]
November 15th, 2007 at 5:28 pm
[...] 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 [...]
December 2nd, 2007 at 11:46 pm
@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.
December 2nd, 2007 at 11:54 pm
Cool stuff. This would benefit from formal specification in the W3C CSS working group, I believe.
December 10th, 2007 at 8:21 am
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 ?
December 19th, 2007 at 8:43 pm
[...] 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. [...]