With CSS3’s 3D transforms it is possible to create a sphere-like object, albeit with many elements. Recently I’ve been looking at creating applicable 3D carousels. These rely on positioning panels in a circle around a central point (ie. rotation about the Y-axis), I put these panels in an unordered list. A natural extension is to duplicate each <ul> and rotate about the X-axis, creating a sphere.
An update to the original 3D cube (from July 2009), I’ve added touch gesture support (iOS) and click-and-drag behaviour. Animation is incredibly smooth on the iPhone, even the 3G model. Arrow key presses will still rotate the cube, and ESC will reset it.
A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated. Last week WebKit included the much anticipated (at least on my part) 3D transforms in its latest nightly build. It is now possible to create all sorts of crazy three-dimensional and animated user interfaces; the power comes largely in -webkit-perspective and a number of updated transforms–adapted to incorporate the Z axis.
A simple accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated.
Here’s another CSS3/WebKit transitions experiment in the (controversial) realm of CSS animation. In this article I recreate the popular parallax effect using multiple background images on a single element, and animating with the recent -webkit-transition property.