Notes and news, insights and inspiration from the autonomous collective mind of GS.

1

CSS3 - The Third Dimension

Jeffrey Schrab by on November 12, 2010

Looking for a creative new way to make your website stand out?

Additions to Safari now make it possible to do 3D transformations of HTML elements. To give these transformations a whirl, I made this slideshow.

CSS3d SlideviewNot all browsers support these features. But Webkit does, which means that all iOS devices can take advantage of them. The technical aspects of CSS 3D are more than I want to get into here. The key point is that websites on these devices can now be much more visually creative.

Somewhere along the line it became clear that not all Safaris are alike.  For instance, mobile Safari on the iPad (iOS 3.2.2) does not render reflections when a 3D transformation is applied to an element.  Neither does Safari for Windows 5.0.2.  But mobile Safari for the iPhone 4 and the latest version of Safari for MacOS do render reflections, even if a 3D transformation is applied.

View the demo.

Share:

Comments

This is so cool! It looks and performs great on the iPad. Make sure you check out that demo link people!

Add new comment