The three people who follow along this blog will remember that, I wrote a post sometime ago about CSS 3. I went through my CSS 3 Fun Box on my HTML5/CSS 3 Test page and I explained what each new CSS 3 property did. I also had a small Transition demo of a box using the scale property. Truth be told, that wasn’t enough. Now that Firefox 4 is out, I wanted to do something just a little bigger and in conjunction with Transformations. Here is the end result (there is also a link to it on my test page). I’m going to leave alone my original thoughts about CSS 3 Transitions. Just keep in mind that the code is based on an example that is no longer there.
With that said, I’m going to let my demo do the talking. Remember that you can view the source, the Javascript and CSS styles are there for you to see.
Where does this work
It runs smoothly on Firefox 4, Google Chrome 10 and Apple Safari 5.0.4. It runs well on Opera 11 with some stuttering/lag. It runs smoothly on Mobile Safari (iOS4) but stutters heavily on Mobile Firefox 4 (Nokia n900 hardware issue?). It does not run at all on the Maemo web browser.
While the demo does not work in Internet Explorer 9 (no support for Transitions at this time), there is a single example of a box with a transform style applied to it. Just click “Start demo” to see it.
GophaSpeak 
Leave a Reply