3D Scene with rotation

dabblet.css

/**
* 3D Scene with rotation
*/

html, body {
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 1200px;
	height: 100%;
	padding: 0;
	margin: 0;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all .4s ease-out;
}

.plan1 {

	background: #FDF;
	opacity: .1;
	position: absolute;
	width: 640px;
	height: 480px;
	-webkit-transform: translate3d( -320px, -240px, 50px );

	pointer-events: none;
}

.plan2 {
	background: #E00;
	opacity: .1;
	position: absolute;	
	width: 640px;
	height: 480px;
	-webkit-transform: translate3d( -320px, -240px, -50px ) scale(1.17);

	pointer-events: none;
}

.target {
	position: absolute;
	top:0;
	bottom:0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

/*  zones sensibles  */
.t1 { left:0%; right: 80%; }
.t2 { left:20%; right: 60%; }
.t3 { left:40%; right: 40%; }
.t4 { left:60%; right: 20%; }
.t5 { left:80%; right: 0%; }

.t1:hover ~ .container { -webkit-transform: rotateY(-8deg);}
.t2:hover ~ .container { -webkit-transform: rotateY(-4deg);}
.t4:hover ~ .container { -webkit-transform: rotateY(4deg);}
.t5:hover ~ .container { -webkit-transform: rotateY(8deg);}

dabblet.html

<div class="target t1"></div>
<div class="target t2"></div>
<div class="target t3"></div>
<div class="target t4"></div>
<div class="target t5"></div>

<div class="container">
	<div class="plan1">plan1</div>
	<div class="plan2">plan-----2</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}