teste transform 3d

dabblet.css

/**
 * teste transform 3d
 */
 
#container{
	position:relative;
	margin:100px auto;
	width:200px;	
	height:200px;
	transform:perspective(500);
	transition:all 500ms linear;
	transform-style: preserve-3d;
	transform-origin:0 50%;
}

img{
	width:200px;	
	height:200px;
}

figure{
	background:#155CA3;
	position:absolute;
	margin:0;
	display:block;
	width:100%;
	height:100%;
	/*backface-visibility:hidden;*/
	opacity:0.7;
}
.front{
	transform:rotateY(0) translateZ(100px);
}
.back{
	transform:rotateY(180deg) translateZ(100px);
}
.left{
	transform:rotateY(-90deg) translateZ(100px);
}
.right{
	transform:rotateY(90deg) translateZ(100px);
}

.top{
	transform:rotateX(90deg) translateZ(100px);
}

.bottom{
	transform:rotateX(-90deg) translateZ(100px);
}

#container:active{
	transform:rotateY(180deg);

}

dabblet.html

  <div id="container">
    <figure class="front"><img src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/07/css3.jpg"></figure>
    <figure class="back"><img src="http://www.phprime.com.br/wp-content/themes/envision/images/cursos/css3.png"></figure>
    <figure class="left"><img src="http://media02.hongkiat.com/css3-code-slim/css3-markup.jpg"></figure>
    <figure class="right"><img src="http://dapazze.com/wp-content/uploads/6079852166_e1f2c9c8f2.jpg"></figure>
    <figure class="top"><img src="http://www.agni.art.br/wp-content/uploads/2012/11/html5-and-css3.jpg"></figure>
    <figure class="bottom"><img src="http://files.myopera.com/mimetist/albums/12192732/HTML5%2BCSS3.png"></figure>




  </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}