Safari 5 enables CSS 3D Transforms in Windows!
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
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.
Check also Advanced CSS Animator for amazing, flash free CSS animations in Dreamweaver!
Need full power and control of your CSS based animations? Awesome effects combined all together? Full Cross browser support and no Flash at all? The Advanced CSS Animator is the answer to your prayers!
With the Advanced CSS Animator you can animate virtually any CSS Property! Borders, colors, font sizes, position, opacity, apply CSS Transformations like rotate, skew, zoom and more! Use the supplied presets to choose from ready animations like fade in/out, expand, collapse, position in browser, paper spin, shake, blink or save your own CSS animations in a new preset!
Comments
Be the first to write a comment
You must me logged in to write a comment.