CSS3 transforms in WebKit
Posted on 27th October 2007 in CSS |
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.
5 Responses
Another good find. I wonder how long it will take for this to be mainstream though?
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 :P. 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
I like this i hope Mozilla do back this i am all up for the “Green Light”
Mozilla just checked in code for CSS transforms the the other day! It’s -moz-transform instead of -webkit-transform, though.