Links

Documentation

• CSS 3D Transforms, Editors Draft
• Safari: Supported CSS Properties
• Surfin' Safari - Blog Archive » 3D Transforms
• Safari CSS Visual Effects Guide: Transforms
• Dirk Weber
  • Understanding CSS 3D Transforms (CSS 3D – 1)
  • The Matrix Revolutions (CSS 3D – 2)
  • Natural Object-Rotation with CSS3 3D
• Building a pure CSS 3D City by Matteo Spinelli
• Pragmatic CSS3 -webit-transform matrix3d Tutorial by 9elements

Examples

If you are a rocking a CSS 3D transform, feel free to add your site to the list.

• From Surfin' Safari - Blog Archive » 3D Transforms:
  • Poster Circle
  • Perspective
  • Transform Style
  • Morphing Power Cubes
• Apple Safari HTML5 Demos
  • Web Gallery
  • Photo Transitions
  • VR
• Panic - Transmit: Features -- See All New Features
• made@gloira!
• Freelancember
• Snow Stack - WebKit 3D CSS Visual Effects
• wonder webkit
• BrandAwake - (suffers from pixelation due to content not returning to Z origin plane)
• 3D Cubes, based on Paul R. Hayes 3D CSS cube II (suffers from multiple vanishing points)
• desandro.com
  • Behold dropshado.ws, Fruit stickers
• 3D Rotating Molecules on the iPhone/iPad | jackadamblog - outlines clever billboarding technique for reverse transforms
• Paul Hayes
  • 3D CSS cube with added touch gestures, click and drag
  • 3D CSS cube with rotating navigation
  • Hack the planet
  • 3D CSS Tetrahedron
  • 3D CSS Sphere
• splat collision
• Dirk Weber – pop up book in HTML and CSS
• Matthew, MadeByCanvas – multi-dimensional slideshow (falls back to a sort-of-pseudo-3D for Chrome)
• CSS3 Playground - Flip Cards (basic demo + practical applications for 3D transforms)
• BigText Demo Wizard by Zach Leatherman
• 3D Flipping Contact Form - When submitted, the form flips over to reveal an envelope that gets dropped into a mail slot.
• BeerCamp at SXSW 2011 - 3D Scrolling, sections are arranged behind one another in 3D space. Falls back to 2D scale transforms. Source on GitHub
• Alan Gresley css-class.com
  • Rotating color cube with CSS3 animation and transforms.
  • Rotating color cube box with CSS3 animation, transforms and gradients
• CSS Only 3D Atom Model - 3D Orbital motion in the form of an Atom, multiple synchronized transforms. Webkit Only - Safari animation only as of Chrome 9
• 20-Sided Die 3d Transforms Demo - Matthew Lein
• Matteo Spinelli cubiq.org
  • 3D City
  • City building
  • 3D City test
• Reeder for Mac (suffers from UA sniffing, blocking Chrome from displaying 3d)
• Joe Critchley
  • Time machine
  • CSS3 Spinning Gallery
  • CSS3 & HTML5 Video Gallery
• Steff.me by Steffan Williams

Browser Support

• Firefox: Bug 505115 - CSS3 3D-Transforms
• Chrome: Web Platform Status > CSS & Presentation > CSS3 3D Transforms