An update on the original 3D cube (from July 2009 no less), 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.

One year on and the cube still only works in Safari. Chrome, which says it supports webkit-perspective and webkit-transform, still renders differently. Firefox doesn’t support 3D transforms yet.

It works relatively simply: on click the start co-ordinates are saved and on drag the difference between current drag position and starting co-ordinates are applied to the cube as a transform, which is completed after the specified transition duration. Many thanks to Remy Sharp and his rubik’s experiment, which got me started with a lot of the basics.

Touch tweaks

Pixel values for touch positions are found in event.originalEvent.touches[0].pageX, instead of event.pageX. Using ‘start minus current’ pixel values led the cube to rotate more than intended on the iPhone. To correct, and for intuitive behaviour, the difference is reduced by a factor of four.

JavaScript prevents single touch default events — e.g. scrolling and text selection, but if it detects more than one touch (event.originalEvent.touches.length) the cube won’t rotate, so pinch and zoom will still work. This is a compromise.

A 200ms transition duration suits the browser, but on touch devices it felt sluggish, so I’ve upped it to 50ms so the cube is always at your finger-tips.

Better CSS

The cube is created exactly as before, but I’ve simplified the markup a little — dropping the face and number class names in favour of CSS3 selectors:

#cube > div:first-child  {
-webkit-transform: rotateX(90deg) translateZ(200px);
}

#cube > div:nth-child(2) {
-webkit-transform: translateZ(200px);
}

#cube > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(200px);
text-align: center;
}

#cube > div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(200px);
}

#cube > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}

#cube > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px) ;
}

Any questions?

This is quite a speedy write-up, if anything needs explaining I’m happy to go into a bit more detail.

Last week WebKit included the much anticipated (at least on my part) 3D transforms in its latest nightly build, announced practically alongside the awesome Snow Stack demo that provides a 3D interface for browsing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more exciting demos, including “Morphin Power Cubes” and “Poster Circle”. 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.

Since working on the 3D cube using 2D transforms back in April I’ve experimented with perspective to create something more powerful, playing around with 3D transforms on the iPhone a few times (e.g. this early rotating demo). Now I’ve got something worth sharing.

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.

Result

A 3D cube that rotates using the Up, Down, Left and Right arrow keys.
Supported browsers: WebKit Nightly r46042+

How To

I’ll start with the markup, because it’s simple. Each of the six cube faces is given a face class and another relating to it’s number. These six faces sit within a cube container, which sits in another wrapper, each is necessary.

<div id="experiment">
	<div id="cube">
		<div class="face one">
			One face
		</div>
		<div class="face two">
			Up, down, left, right
		</div>
		<div class="face three">
			Lorem ipsum.
		</div>
		<div class="face four">
			New forms of navigation are fun.
		</div>
		<div class="face five">
			Rotating 3D cube
		</div>
		<div class="face six">
			More content
		</div>
	</div>
</div>

The outer wrapper serves as a camera, on which you apply some perspective — appropriate 3D transformations are then applied to descendants. -webkit-perspective defines the depth of the Z-plane and relative sizes of elements above and below it, -webkit-perspective-origin specifies the perspective’s origin. View a perspective example (webkit.org)

    #experiment {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;
    }

The second container, the actual cube, has a specified height, margin, position, etc. as usual. The height and width are necessary to create some confines for the cube face transformations — alternatively the width defaults to 100% and the cube’s appearance would vary with window width. -webkit-transition (documentation) defines the animated property, duration and timing-function — we’re animating the 3d transformation (via -webkit-transform) linearly for two seconds. -webkit-transform-style determines whether child elements lie flat against their parent (“flat”) or remain in 3D space (“preserve-3d”).

    #cube {
      position: relative;
      margin: 0 auto;
      height: 400px;
      width: 400px;
      -webkit-transition: -webkit-transform 2s linear;
      -webkit-transform-style: preserve-3d;
    }

Using the .face class common styles are applied to the six sides; coloring, size, padding, etc. Importantly they are each positioned absolutely, relative to the cube container. The background rgba property is included to make the cube look pretty and transparent.

    .face {
      position: absolute;
      height: 360px;
      width: 360px;
      padding: 20px;
      background-color: rgba(50, 50, 50, 0.7);
    }

Each of the faces, one through six, needs to be rotated in 3D space to its correct starting position. Using translateZ the elements are brought 200px (half their width) off the Z-plane. Each of the faces must be at 90 degrees. Rotating solely in the X plane positions the top and bottom faces (one, six), before rotating the last four faces in the Y plane, much like origami. The extra rotate on the sixth face rotates the content in 2D space to correct its orientation.

    #cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(200px);
    }

    #cube .two {
      -webkit-transform: translateZ(200px);
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(200px);
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(200px);
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(200px);
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
    }

Our cube is now complete — but it doesn’t move! With a keydown event listener we can increment X and Y angles based on different key presses, before applying them as inline styles on the cube container. In combination with the transition effect on #cube, all six faces rotate in sync from their original position to the newly defined angle, creating a seamless 3D cube interface.

  	var xAngle = 0, yAngle = 0;
	document.addEventListener('keydown', function(e)
	{
		switch(e.keyCode)
		{

			case 37: // left
				yAngle -= 90;
				break;

			case 38: // up
				xAngle += 90;
				break;

			case 39: // right
				yAngle += 90;
				break;

			case 40: // down
				xAngle -= 90;
				break;
		};

		$('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
	}, false);