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.
-webkit-perspective and a number of updated transforms–adapted to incorporate the Z axis.
A simple accordion effect can be achieved using CSS3’s
-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