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!
Read it at the external site...
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
The demos show how the latest version of Apple’s Safari web browser, new Macs, and new Apple mobile devices all support the capabilities of HTML5, CSS3, and JavaScript. Not all browsers offer this support. But soon other modern browsers will take advantage of these same web standards — and the amazing things they enable web designers to do.
Morphing Power Cubes
This demo
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
interactive.
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.
Other Demos:
- Poster Circle - The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing element around too.
- Snowstack- WebKit 3D CSS Visual Effects
- Starwars
- 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.
