Paul Hayes & FofR Online; web design portfolio and experiments

Last week Web­Kit included the much anti­cip­ated (at least on my part) 3D trans­forms in its latest nightly build, announced prac­tic­ally along­side the awe­some Snow Stack demo that provides a 3D inter­face for brows­ing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more excit­ing demos, includ­ing “Morphin Power Cubes” and “Poster Circle”. It is now pos­sible to cre­ate all sorts of crazy three-dimensional and anim­ated user inter­faces; the power comes largely in -webkit-perspective and a num­ber of updated trans­forms – adap­ted to incor­por­ate the Z axis.

Since work­ing on the 3D cube using 2D trans­forms back in April I’ve exper­i­mented with per­spect­ive to cre­ate some­thing more power­ful, play­ing around with 3D trans­forms on the iPhone a few times (e.g. this early rotat­ing demo). Now I’ve got some­thing worth sharing.

A 3D cube can be cre­ated solely in CSS, with all six faces. Using JavaS­cript to detect key presses and update inline styles this cube can be intu­it­ively navigated.

Res­ult

A 3D cube that rotates using the Up, Down, Left and Right arrow keys.
Sup­por­ted browsers: Web­Kit 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 relat­ing to it’s num­ber. These six faces sit within a cube con­tainer, which sits in another wrap­per, 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 wrap­per serves as a cam­era, on which you apply some per­spect­ive — appro­pri­ate 3D trans­form­a­tions are then applied to des­cend­ants. -webkit-perspective defines the depth of the Z-plane and rel­at­ive sizes of ele­ments above and below it, -webkit-perspective-origin spe­cifies the perspective’s ori­gin. View a per­spect­ive example (webkit.org)

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

The second con­tainer, the actual cube, has a spe­cified height, mar­gin, pos­i­tion, etc. as usual. The height and width are neces­sary to cre­ate some con­fines for the cube face trans­form­a­tions — altern­at­ively the width defaults to 100% and the cube’s appear­ance would vary with win­dow width. -webkit-transition (doc­u­ment­a­tion) defines the anim­ated prop­erty, dur­a­tion and timing-function — we’re anim­at­ing the 3d trans­form­a­tion (via -webkit-transform) lin­early for two seconds. -webkit-transform-style determ­ines whether child ele­ments lie flat against their par­ent (“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 com­mon styles are applied to the six sides; col­or­ing, size, pad­ding, etc. Import­antly they are each posi­tioned abso­lutely, rel­at­ive to the cube con­tainer. The back­ground rgba prop­erty 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 cor­rect start­ing pos­i­tion. Using translateZ the ele­ments are brought 200px (half their width) off the Z-plane. Each of the faces must be at 90 degrees. Rotat­ing solely in the X plane pos­i­tions the top and bot­tom faces (one, six), before rotat­ing the last four faces in the Y plane, much like ori­gami. The extra rotate on the sixth face rotates the con­tent in 2D space to cor­rect 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 com­plete — but it doesn’t move! With a key­down event listener we can incre­ment X and Y angles based on dif­fer­ent key presses, before apply­ing them as inline styles on the cube con­tainer. In com­bin­a­tion with the trans­ition effect on #cube, all six faces rotate in sync from their ori­ginal pos­i­tion to the newly defined angle, cre­at­ing a seam­less 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);