Experimental CSS3 effects always give us a glimpse of the future of web development. With the introduction of CSS 3D transform and keyframe animation capabilities, it opens up great potential of animation with pure CSS. These examples I found most of them are powered by javascript to create interactivity with the viewers. They are simply stunning and you can use them on your website as well, just make sure you have a fallback support for browsers that doesn’t support it.
- Paperfold CSS
The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.
- Apple’s iPhone 4 Slider
An explanation of the CSS animation on Apple’s iPhone 4S webpage
- CSS3 Lighting Effects
3D transforms are awesome, but they’re even cooler with lighting effects! The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. (Best in Safari)
- Scroll Effect
Impressive scrolling effect from Hakim
- CSS 3D Lighting Engine
Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space. It’s rather processor-intensive, so please use responsibly.
- dodecahedron
Amazing dodecahedron effect!
- CSS and Type
CSS&TYPE.COM is a showcase of typography and text effects using CSS 3.0 properties.
