CSS3 transforms in WebKit

In addition to Web Fonts recently introduced in WebKit, there’s now a rudimentary support for CSS transforms as well. As of now you can scale, rotate, skew and translate the boxes in the latest nightly of WebKit.

Even though this is a WebKit-specific development at this point, the similar functionality will definitely be there in forthcoming CSS specifications presumably under the rotation and rotation-point property for instance.

Such a functionality would save developers a lot of time on image processing or scripting and provide a lightweight solution for a number of situations.

To illustrate the point, please find the image below and click it for the live test case:

Transform is available through -webkit-transform property. For example to scale an image to 145% and rotate it by 45 degrees you could use the following code:

img {-webkit-transform:rotate(45deg) scale(1.45);}

Alternatively you may also add skew primitive and flip the image by 300 degrees as well:

img {-webkit-transform:rotate(45deg) scale(1.45) skew(-300deg);}

Click here to download WebKit.

7 Responses

David Hopkins

Another good find. I wonder how long it will take for this to be mainstream though?

Ain Tohvri

Very hard to predict and it’s a bit worrying to see that IE7 got released in such a rush with initial objectives left out.

At the same time, quite interesting fact that I’d like to point out, is that for majority of my own sites, mostly technology-based or in a specific niche, browser statistics is rather different, e.g. flash tekkie has 67.48% Fx, 18.96% Safari and only 9.7% IE users while a poker site has 43.08% IE, 26.94% Fx and 22.06% Safari users. So the trend is still looking good.

So I think if this draft functionality in WebKit gets backed up by Mozilla and confirmed for CSS3 by W3C, it’s a green light. Microsoft is forced to catch up.

The stats are starting to look a bit brighter over here in the UK too, which is probably one of the worst places for IE use; and web design and development . Looking at Analytics, although IE is averaging at about 75% share, IE6 is now only half of that. When the day comes that there will be no more IE6 only stylesheets and no more alpha images loaders I will be very happy