teste transform 3d

dabblet.css

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

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

figure{
	background:#155CA3;
	position:absolute;
	margin:0;
	display:block;
	width:100%;
	height:100%;
	backface-visibility:hidden;
}
.back{
	transform:rotateY(180deg);
}

#container:hover{
	transform:rotateY(180deg);
}

dabblet.html

  <div id="container">
    <figure class="back"><img src="http://www.phprime.com.br/wp-content/themes/envision/images/cursos/css3.png"></figure>
    <figure class="front"><img src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/07/css3.jpg"></figure>
  </div>

dabblet.js

// alert('Hello world!');

settings.json

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