All entries in topic: transition

Paul describes the recipe for making cool 3D shapes using a dash of CSS3 and a crap load of HTML elements. The recipe includes the -webkit-transform-style: preserve-3d; statement which I hadn’t seen before. Apparently it makes sure that an element’s children share the same 3D space as their parent, instead of being flattened. Not that I have any real understanding of what that means or anything.

In this nifty demo David, manipulates some CSS3 animation properties using a dash of JavaScript to created an exploding image effect. He based it on an exploding text example created by Ryan Florence who also wrote the JavaScript animation library David’s demo uses.

Gordon Brander has implemented a Mac OS X Leopard-style stack menu in pure CSS3; no JavaScript required.

This one is slightly mind-boggling. Román Cortés has created an impressive simulation of page turning using nothing but CSS3 animation. It runs very smoothly in Chrome, but it a little shaky in Safari.

Here’s a cool effect, watch the letters in this demo vanish as though they were made of vapour. The effect is pure CSS3 using the WebKit animation properties. Hard to get a good screen shot of this effect. I had to resort to using Quicktime to record a screen demo and then cropped a frame from the movie.

This is really clever. Tyler Gaw has made a css3-powered kinetic-type movie. The kind of display where you hear the actors speaking and the text of their speech is animated onto the screen. Lot’s of CSS3 goodness is involved including gradients, transitions, and transforms.

Found something called a “Morphing Power Cube” demo on the WebKit site. It spins, it’s 3D, it’s a cube. Far out.

Oh and it uses a WebKit CSS property called -webkit-backface-visibility, which I’ve never heard of before. It seems to have a very narrow usage in that you only use it “to specify whether or not an element is visible when it is not facing the screen.”

Being a JavaScript guy I’ve always thought that movement should always be controlled by JavaScript. But this pure CSS3 animation by Anthony Calzadilla has me thinking that maybe doing animation in CSS is not so evil after all.
Continue reading…

Holy shit he did it, Mathias Karstädt has created a twirling photo gallery.

Natalie Downe takes the typical photo gallery grid and adds a touch of awesome with CSS3. It looks great, but I think it would have been truly awesome if she’d also added a print style sheet. As it is if you try to print it, some of the photos are hidden behind the rest.