3D transform: une porte comic

dabblet.css

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


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

.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;

	}
	span {
	position: absolute;
	bottom: 40px;
	width: 100%;
	background: #FAFAFA;
	color: green;
	font-family: helvetica, sans-serif;
	text-align:center;
	padding: 20px 0;
	
	-webkit-transform-style: preserve-3d;
	}
	#container > span {
	font-family: "comic sans ms", fantasy;
	z-index: -10;

dabblet.html

<div id="container">
				
	<div class="porte">
	
		<span>Helvetica</span>
	
	</div><!-- end -->
	
	<span>La Comic de Connard</span>
				
</div><!-- end -->

dabblet.js

// alert('Hello world!');

settings.json

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