3D transform: une porte

dabblet.css

/**
 * 3D transform: une porte
 */


#container {
	width: 250px;
	height: 400px;
	background: #CCC;
	-webkit-perspective: 1000px;
	margin: 50px auto;
}

.porte {
	width: 250px;
	height: 400px;
	background: #BADA55;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s ease-in;
	-webkit-transform-origin: left center;
	
}
	#container:hover .porte {
		-webkit-transform: rotateY(-95deg);
		-webkit-transition: -webkit-transform 2s ease-out;

	}

dabblet.html

<div id="container">
				
	<div class="porte"></div><!-- end -->
				
</div><!-- end -->

dabblet.js

// alert('Hello world!');

settings.json

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