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.