Safari 5 enables CSS 3D Transforms in Windows!(June 10, 2010)
"Position elements on the page in three-dimensional space using CSS"
After announcing that WebKit on Mac OS X has support for CSS 3D transforms, now it comes on
Windows too! It allows you to position
elements on the page in three-dimensional space using CSS. Also, the CSS
3D Transforms are fully Hardware Accelerated, so this
gives you major speed gain!
Here are some example of how to use CSS transformation and animations to get interesting-looking behavior.
In order to view these demos you need to run a
Safari 5 on Windows or Safari 4+ on Mac.
Apple HTML5 Showcase
Morphing Power Cubes
shows some more interesting content using 3D transforms, animations and
transitions. Note that you can still select the text on the the
elements, even while they are rotating. Transforms elements remain fully
Click Toggle Shape to switch between nested cubes and one big ring. Note how the planes move smoothly to their new locations, even while the whole shape is rotating. You can even interrupt this transition by clicking again, and they move back smoothly.
- Snowstack- WebKit 3D CSS Visual Effects
- 3D Animation using pure CSS3 -
Here's an example of pretty powerful CSS3 animation and 3d effects.
Using the perspective, transform and transition properties, you can
create a 3d animation effect.