Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Layering Test</title>
	<style>
		.flat {
			position: absolute;
			-webkit-transform: translate3d(200px,200px,10000px);
			-webkit-perspective: 0;
			width: 600px;
			height: 400px;

			color: black;
			border: 1px solid black;
			background-color: rgba(255,255,255,0.5);
		}
		.perspective_container {
			-webkit-perspective: 800;
			-webkit-transform-style: preserve-3d;
		}
		.threed {
			position: absolute;

			-webkit-perspective: 800;
			-webkit-transform-style: preserve-3d;
			-webkit-transform: translate3d(100px,20px,500px) rotateX(45deg) rotateY(45deg);
			width: 800px;
			height: 200px;
			background-color: #F53;
		}
	</style>
	<script>

	</script>
</head>
<body>
	<div class="flat"><h1>Sample page to demonstrate faux 2d layered over 3d</h1>
		This content should be 2d, and layered on top of everything else</div>
	<div class="perspective_container">
		<div class="threed">This content should be 3d and rotated</div>
	</div>
</body>
</html>