The cool browsers support radius corners, but Safari supports CSS transformations that allow developers to scale, skew, and rotate objects on the page like we’re used to doing in PostScript. And better than that, we can animate those transformations over time — all without any JavaScript.
Fire up Safari or Chrome and mouse over the examples here. The screencast at the top is from the menu on that page. There are, obviously, better uses for these transforms, but it’s easy to see it at work there. Also see this screencast. It shows a rendering error, but it’s a better use of the tech.
Now kick it up a notch with 3d transforms. They only work on the iPhone and iPod touch for now, but they’re quite nifty. See these examples: one, two. Paul Bakaus offers more detail, and Matthew Congrove offers this example of flick navigation.
The problem that I have is that the Google browser is not 100% rendering compatible with Safari (as in fonts), yet since they both identify the same way there is no way to hack proper css in emergencies.
[...] on the hunt for the above information, I came across a very cool website that illustrates CSS transformations, currently only supported by Chrome and Safari. The heat is [...]
The problem that I have is that the Google browser is not 100% rendering compatible with Safari (as in fonts), yet since they both identify the same way there is no way to hack proper css in emergencies.
sexyyyy
[...] on the hunt for the above information, I came across a very cool website that illustrates CSS transformations, currently only supported by Chrome and Safari. The heat is [...]
[...] are a few options (see previous): .transformed { -webkit-transform: rotate(20deg) -webkit-transform-origin: top left [...]