Yesterday, Dave Hyatt announced support for CSS transformations in WebKit, giving it the ability to rotate elements, scale them, skew them, and more.
I’ve created a sample page demonstrating rotations in WebKit (here’s a screenshot for the WebKit nightly-deprived). This took me about 5 minutes; doing something like this in Photoshop would have taken much longer.
The CSS used for the demo page is quite simple. Rotating the images goes like this:
#transform-test-1 { -webkit-transform: rotate(-10deg); }
#transform-test-2 { -webkit-transform: rotate(15deg); }Additionally, the sample page has shadows (subtle, but effective) on the boxes, which is achieved by using box-shadow combined with RGBA colours, like this:
.transform-test {
-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
}It’s funny how long it took for CSS to get a way to rotate elements (unofficially, I should add). Rotating blocks is not a particularly novel concept, and many DTPers would likely agree.
WebKit’s recent developments related to CSS functionality are nonetheless very interesting. There is unfortunately little use for these developments at this point, but once other browser developers start implementing more advanced features like the ones mentioned above, we’re on the right track, heading for a CSS aimed more at designers instead of developers.
I can barely wait for the next step.