index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="description" content="An experiment with CSS3 transitions." />
	<title>The Cube</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://fgnass.github.com/spin.js/dist/spin.min.js"></script>
	<script type="text/javascript">
		/* Default configuration */
		var _config = {
			enableKeys: false,
			transformProperty: null,
		}

		/* Check for transform property */
		var dummy = document.createElement('div');
		$.each('transform MozTransform WebkitTransform OTransform msTransform'.split(' '), function(i, prop) {
			if(typeof dummy.style[prop] !== "undefined") {
				_config.transformProperty = prop;
				return false;
			}
		});

		$(document).ready(function() {
			/* Rotate! */
			var rotate = (function() {
				var x = y = 0,
					cube = $('#cube')[0];

				return function(direction) {
					switch(direction) {
						case 'left':
							y -= 90;
							break;

						case 'right':
							y += 90;
							break;

						case 'up':
							x += 90;
							break;

						case 'down':
							x -= 90;
							break;
					}
					cube.style[_config.transformProperty] = 'translateZ(-160px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
				};
			})();

			$('a[data-rotate]').click(function() {
				$.each($(this).attr('data-rotate').split('-'), function(i, direction) {
					rotate(direction);
				});
				return false;
			});

			$('.login form').submit(function() {
				rotate('down');
				setTimeout(function() {
					$('.login').addClass('error');
					rotate('up');
				}, 1500);
				return false;
			});

			$('.join form').submit(function() {
				rotate('down');
				setTimeout(function() {
					$('.about').addClass('success');
					rotate('left');
					rotate('down');
					setTimeout(function() {
						rotate('down');
					}, 300);
				}, 1500);
				return false;
			});

			$('.help form').submit(function() {
				rotate('down');
				setTimeout(function() {
					$('.help').addClass('success');
					rotate('up');
				}, 1500);
				return false;
			});

			/* Controls */
			$('#enable-keys').change(function() {
				_config.enableKeys = $(this).is(':checked');
			});

			/* Arrow navigation */
			$(document).on('keydown', function(e) {
				if(_config.enableKeys) {
					var mapping = {
						37: 'left',
						38: 'up',
						39: 'right',
						40: 'down'
					}
					if(mapping[e.keyCode]) {
						rotate(mapping[e.keyCode]);
					};
				}
			});
		});
	</script>
	<style type="text/css">
		* {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html, body {
			font-family: 'Helvetica Neue', Helvetica, sans-serif;
			width: 100%;
			height: 100%;
			color: #483A3A;
			font-size: 18px;
		}

		body {
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAEsklEQVRogY2ZS3LjQAxDWeUz+pJ9Sc1ipjXopwclC5VtWc0PCIKMM9d1fb7f732tte7X/d1a675/Xdfnuq7PzBxn8ko73+/3MzOftdZnZo736WPbzbPXdT3sMp5tY/aBdJiBbmP7u7z2vTy7z/NKx/vs/pzv8+JZXvuZtdbfRDZSmRSNpsO8ZuaTVTXE0/6+8ozZJpBWnW13Zv4nYiUj3Yg66ZNBZgCHw5IQ6UTA0k7ajdimIp4oNH4SpaRTOspe2FUkbQmcVYvPh415oEpUDi5GEGkwwWCFSaN8lr7YTxaT0iydZIDkZr4mHVhFBv8bqlpFzB/peVDbFIWUopKYNBs9jRJWFVacyaeK5it60HWd0kuZznNJM9rJ90Q0AyRQBOHt/VrrM5SzNGT90KrHcjOBpKwFxB4wCqWQ8Owkik1eiaD1AEtvDd6GI2mZlDFpVuCt+d5QtpJTorOalmz6Mrm3mWPPH/5IF0ssgzD5pL7bfVthKMFMxMChwt70bYqTiVBNTFpZTVMl649WNSbRbNznfgqEfDc5Jn95npUySppvok4AIA7/S9YmNZuMwXPKM2H2lM0gPk82UAEpALdqte3TVMhWGJPdVDoqFilkn613GxiTHxqFiBBpwHON120bsP5s8yz9pf9DfimxFgRpRWUyBE1G+UyjoVWJqrbWOpdGotuakr1gSFIAWrNatdqCaj16bwFcP2z/MTT5nAHAc6xSnmszKBMzet+93HiaDzXE+J5/O1AN03kDi7at/1j1e9diyVo1flKOJs/Gc07z9EPkqaJG2UePpEpwRUljbdtl83LRZCUNHFLuDaxDfkkFNlkbmlbqBIHVtYDJfYuFNDKbQ5kzR8Zra/LWpBSUDJ7VaoLB+LhszlsCjUr2fVbv4G7ZryzQtkWk+LDXAqjnD3N2zyTzTRqJqklwEwZWyyrDBI9mp2okLzNBNrMhT1SJaFOlRkUqn8Q9j4BNxUgjzhhWytC2IZrqZAHSV8aXCQ8DtlnCvrEdzHhu6mP0Yi8SVKMqqzwZbAZm/GR12FMMylSKQsDKWeBpo1XuUC3KING0aWx6z0rZHLC/N3g/+3WfPaoQvifRZEUMFd4z1eHgItUyOFbXlNJY8XiOmk4JtF4gZUz/uTPtoBPZtqY0apmQ3DRl81jmRJr3WgPb9Ca3bThan7Uz4e/5m69tqJRNDizT/DbQGngmDpxpCcjRW5TGVIbkaBtMtqZY8gysybI9R5ry3r1rUfpsmreFkNJq1bPtlsm3rYC9azJ9qxaXQqJkSpJSSJRJE0PbZlECyFdeMveeO41xmKjZc63f3gZom/ikE+0RvEnUUyIpyZZQ3qe2789MhIrE979RNdLtuq7nP3p40MqbSSeqVDFW22hLP9YfpopJrX9g+f/skiqKwIxWJm0Zv/kdt9+0z4pwyh+gETkqDEtvApCJmfKl8zcAGIOdY6VuqpozUxaim8aN96QcHb9tBwSMtGNSa8XPQZRWNjlReNtSuRkQlMZ/SjT7tinanQh7g9QhSibHpGdD9y0466UEygb1DR6bzhqbtGiBUV6tj+xZEwarGv0dg5llJO85G+io9U5Tl7cq0X76abvafv4PMfnUWgiRIfEAAAAASUVORK5CYII=');
		}

		#stage {
			height: 100%;
			width: 100%;
			-webkit-perspective: 800px;
			-moz-perspective: 800px;
			perspective: 800px;
			-webkit-perspective-origin: 50% 70%;
			-moz-perspective-origin: 50% 70%;
			perspective-origin: 50% 70%;
		}

		#cube {
			position: relative;
			top: 50%;
			left: 50%;
			margin: -160px 0 0 -160px;
			height: 320px;
			width: 320px;
			text-align: center;
			-moz-transform-style: preserve-3d;
			-moz-transition: all 300ms ease-in;
			-webkit-transform-style: preserve-3d;
			-webkit-transition: all 300ms ease-in;
			transform-style: preserve-3d;
			transition: all 300ms ease-in;
			-moz-transform: translateZ(-160px);
			-webkit-transform: translateZ(-160px);
			transform: translateZ(-160px);
		}

		.side {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #F5EEDB;
			padding: 20px;
			border: 5px solid #EAE1C0;
			z-index: 1;
		}

		.side.front {
			-moz-transform: translateZ(160px);
			-webkit-transform: translateZ(160px);
			transform: translateZ(160px);
		}

		.side.top {
			-moz-transform: rotateX(90deg) translateZ(160px);
			-webkit-transform: rotateX(90deg) translateZ(160px);
			transform: rotateX(90deg) translateZ(160px);
		}

		.side.left {
			-moz-transform: rotateY(-90deg) translateZ(160px);
			-webkit-transform: rotateY(-90deg) translateZ(160px);
			transform: rotateY(-90deg) translateZ(160px);
		}

		.side.bottom {
			-moz-transform: rotateX(-90deg) translateZ(160px);
			-webkit-transform: rotateX(-90deg) translateZ(160px);
			transform: rotateX(-90deg) translateZ(160px);
		}

		.side.right {
			-moz-transform: rotateY(90deg) translateZ(160px);
			-webkit-transform: rotateY(90deg) translateZ(160px);
			transform: rotateY(90deg) translateZ(160px);
		}

		.side.back {
			-moz-transform: rotateY(180deg) translateZ(160px);
			-webkit-transform: rotateY(180deg) translateZ(160px);
			transform: rotateY(180deg) translateZ(160px);
		}

		.error-message, .success-message {
			display: none;
			background-color: #de564b;
			color: white;
			position: relative;
			top: -25px;
			padding: 5px 10px;
			border-radius: 0 0 6px 6px;
			font-size: 14px;
		}

		.error .error-message {
			display: inline-block;
		}

		.error input {
			border-left-color: #DE564B;
			padding-left: 5px;
		}

		.success .success-message {
			background-color: #8fb98b;
			display: inline-block;
		}

		.side a {
			color: #483A3A;
			display: inline-block;
			font-size: 14px;
			padding: 3px 7px;
			text-decoration: none;
		}

		.side a:hover {
			background-color: #EAE1C0;
		}

		.side form {
			display: block;
			margin-bottom: 10px;
		}

		p {
			margin: 20px 0;
		}

		.separator:after {
			content: '·';
			color: #d3c9a5;
			font-weight: bold;
		}

		.emoticon {
			color: #d3c9a5;
			font-size: 145px;
			line-height: 100%;
			vertical-align: middle;
			margin: -20px 0 40px 0;
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		#spinner {
			position: absolute;
			top: 50%;
			left: 50%;
		}

		input {
			width: 100%;
			padding: 5px 5px 5px 1px;
			margin-bottom: 10px;
			border: 0 none;
			border-left: 4px solid transparent;
			background-color: white;
			color: #483A3A;
			outline: none;
			font-size: 18px;
		}

		input[type=submit] {
			color: white;
			background-color: #d3c9a5;
			border-left-color: transparent;
			cursor: pointer;
		}

		input::-webkit-input-placeholder {
			color: #888;
		}

		input:-moz-placeholder {
			color: #888;
		}

		.octocat img {
			display: block;
			margin: -20px 0 0 -20px;
			height: 310px;
			width: 310px;
		}

		#header {
			position: absolute;
			top: 20px;
			left: 20px;
		}

		#header span {
			color: #777;
			font-size: 16px;
		}

		#controls {
			position: absolute;
			bottom: 20px;
			right: 20px;
			text-align: left;
			background-color: #eee;
			padding: 0 7px;
			color: #777;
			border-radius: 6px;
		}

		label {
			font-size: 14px;
			padding-left: 5px;
			cursor: pointer;
		}

		#controls input[type=checkbox] {
			width: auto;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="header">
		<h1>The Cube</h1>
		<span>&mdash; an experiment with CSS3 transitions.</span>
	</div>
	
	<div id="stage">
		<div id="cube">
			<!-- Login -->
			<div class="side front login">
				<div class="error-message">Invalid credentials</div>
				<form action="#" method="post">
					<input type="text" name="username" placeholder="Email" />
					<input type="password" name="password" placeholder="Password" />
					<input type="submit" name="send" value="Login" />
				</form>
				<a href="#" data-rotate="right">Join</a>
				<span class="separator"></span>
				<a href="#" data-rotate="left">Help</a>
			</div>
			<!-- Loader -->
			<div class="side top loader">
				<div id="spinner"></div>
				<script type="text/javascript">
					new Spinner({
						'color': '#d3c9a5',
						'lines': 17,
						'length': 22,
						'width': 6,
						'radius': 28,
						'speed': 1.3,
						'trail': 50,
					}).spin(document.getElementById('spinner'));
				</script>
			</div>
			<!-- Join -->
			<div class="side left join">
				<form action="#" method="post">
					<input type="text" name="username" placeholder="Email" />
					<input type="password" name="password" placeholder="Password" />
					<input type="password" name="password" placeholder="Repeat password" />
					<input type="submit" name="send" value="Join" />
				</form>
				<a href="#" data-rotate="left">Login</a>
				<span class="separator"></span>
				<a href="#" data-rotate="left-left">Help</a>
			</div>
			<!-- Help -->
			<div class="side right help">
				<div class="success-message">Success!</div>
				<form action="#" method="post">
					<input type="text" name="username" placeholder="Email" />
					<input type="submit" name="send" value="Reset Password" />
				</form>
				<a href="#" data-rotate="right">Login</a>
				<span class="separator"></span>
				<a href="#" data-rotate="right-right">Join</a>
			</div>
			<!-- About -->
			<div class="side bottom about">
				<div class="success-message">Success!</div>
				<div class="emoticon">=)</div>
				<p>
					<a href="http://koeniglich.ch" rel="me">Written by <span itemprop="name">Patrick Stadler</span></a>
				</p>
				<p>
					<iframe src="http://ghbtns.com/github-btn.html?user=pstadler&type=follow"
	  allowtransparency="true" frameborder="0" scrolling="0" width="132px" height="20px"></iframe>
					<a href="https://twitter.com/pstadler" class="twitter-follow-button" data-show-count="false">Follow @pstadler</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
				</p>
			</div>
			<!-- Empty -->
			<div class="side back octocat">
				<img src="http://octodex.github.com/images/grim-repo.jpg" alt="The Grim Repo" />
			</div>
		</div>
	</div>

	<div id="controls">
		<form>
			<input type="checkbox" name="enable-keys" id="enable-keys" autocomplete="off" />
			<label for="enable-keys">Enable arrow navigation</label>
		</form>
	</div>

	<a href="https://github.com/pstadler/the-cube"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
</body>
</html>