Hey Guys, it is the second decade of the second millennium and we are still kicking around the same 2D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon, 2011 is right around the corner. That’s Twenty Eleven folks. Where is our 3D virtual reality? By now, we should be zipping around the Metaverse in super-sonic motorbikes. Granted, the capability of rendering complex 3D environments has been present for years. On the Web, there already are number of solutions – Flash, three.js in canvas, and eventually WebGL. And finally, we meager front-end developers have our own three-dimensional jewel: CSS 3D Transforms!

<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>flip-container<span class="token punctuation">"</span></span> <span class="token attr-name">ontouchstart<span class="token punctuation">="</span>this.classList.toggle(<span class="token punctuation">'</span>hover<span class="token punctuation">'</span>);<span class="token punctuation">"</span>></span></span>
	<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>flipper<span class="token punctuation">"</span>></span></span>
		<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>front<span class="token punctuation">"</span>></span></span>
			<span class="token comment" spellcheck="true"><!-- front content --></span>
		<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
		<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>back<span class="token punctuation">"</span>></span></span>
			<span class="token comment" spellcheck="true"><!-- back content --></span>
		<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
	<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>

There are two content panes, “front” and “back”, as you would expect, but also two containing elements with very specific roles explained by their CSS. Also note the ontouchstart piece which allows the panes to swap on touch screens. Obviously you should break that code into a separate, unobtrusive JavaScript block if you wish.

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}