Experiments

Animated CSS3 cube using 3D transforms

3D cube interface using new WebKit transforms

Last week WebKit included the much antic­i­pated (at least on my part) 3D trans­forms in its lat­est nightly build, announced prac­ti­cally along­side the awe­some Snow Stack demo that pro­vides a 3D inter­face for brows­ing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more excit­ing demos, includ­ing “Mor­phin Power Cubes” and “Poster Cir­cle”. It is now pos­si­ble to cre­ate all sorts of crazy three-dimensional and ani­mated user inter­faces; the power comes largely in -webkit-perspective and a num­ber of updated transforms–adapted to incor­po­rate the Z axis.

Read More »

Accordion using only CSS

An accor­dion effect can be achieved using CSS3’s :target pseudo-class, with­out requir­ing JavaScript. Using the pro­pri­etary -webkit-transition prop­erty this accor­dion can also be ani­mated.
Read More »

3D Cube using 2D CSS transformations

Multiple cubes created using CSS

Update (July 21st): Using newly released (cur­rently only in Webkit Nightly releases) 3D trans­forms, a three dimen­sional, rotat­ing cube with cor­rect per­spec­tive is pos­si­ble, and as a bonus–the cube can be nav­i­gated using arrow keys. Check out the lat­est demo, “Ani­mated CSS3 cube using 3D trans­forms”.

The impres­sion of a three dimen­sional cube can be cre­ated using mod­ern CSS tech­niques, with­out the need for JavaScript, imagery, can­vas or SVG. Using the pro­pri­etary trans­form prop­erty to skew and rotate shaded rec­tan­gles, indi­vid­ual cube faces can com­bine to form a 3D object. Cur­rently only sup­ported in recent WebKit and Gecko based browsers, most impor­tantly Fire­fox 3.5+ -moz-transform (doc­u­men­ta­tion) and Safari 3.2+ -webkit-transform (doc­u­men­ta­tion).
Read More »

Auto-scrolling Parallax Effect without JavaScript

Correctly rendered background images for parallax effect

Here’s another quick CSS3/WebKit tran­si­tions project in the con­tro­ver­sial realm of CSS ani­ma­tion. This time I have opted to recre­ate the pop­u­lar par­al­lax effect using mul­ti­ple back­ground images on a sin­gle ele­ment and the -webkit-transition prop­erty (doc­u­men­ta­tion). I have based this on Chris Coyier’s par­al­lax tuto­r­ial, reusing the star images with per­mis­sion, the tech­nique itself was coined by Paul Annett (expla­na­tion on Think Vit­a­min). If you’re not quite sure what par­al­lax is, then Chris and Paul both go into some depth to explain it and Wikipedia is always help­ful.
Read More »