3D transform (c) lipelip

dabblet.css

/**
 * 3D transform (c) lipelip

 */


body {
	background: #deddcd;
}

#profs {
	text-align: center;	
	width: 600px;	
	margin: 50px auto;
	-webkit-perspective: 1000px;
}

#profs li {
	float: left;
	list-style: none;
	margin: 0 10px;
	
	-webkit-transition: all 1s linear;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d; 						
}

a {
	width: 110px;
	height: 160px;
	display: block;
	list-style: none;	
	color: #FAFFAA;
	text-decoration: none;
	position: relative;
	font-family: sans-serif;
	font-size: 10px;
	text-transform: uppercase;
}
a .face01 {
	background: url(http://lipelip.be/playground/temp/profs.png) no-repeat;
}		
	#pixeline .face01 { background-position: -270px -202px ;  }
	#kooka .face01 { background-position: -130px top ;  }
	#bourgaux .face01 { background-position: -270px top ;  }
	#emeric .face01 { background-position: -390px top;  }

/* NOM 	*/
a span {
	background: #7a3f3a;
	display: block;
	padding: 5px 0;
	z-index: -10;	
}
	
	.face01, .face02 {
		width: 110px;
		height: 160px;
		position: absolute;
		top: 0;
		}
	.face02 {
		-webkit-transform: rotateY(180deg); 
		background: #fff;
		color: #AAA;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
	}
	
	li:target {  -webkit-transform: rotateY(180deg); }
	
	
	.face02 h1 { font-size: 12px; clear: both; }
	.face02 ul {
		text-transform: none;
		text-align: left;
		padding: 0;
		padding-bottom: 20px;
	}

dabblet.html

<ul id="profs">
			<li id="pixeline">
				<a href="#pixeline">
					<div class="face01">
						<span>@pixeline</span>
					</div><!-- end -->
					<div class="face02">
						<h1>Il aime:</h1>
						<ul>
							<li>Le whisky</li>
						</ul>
						<h1>Il n'aime pas:</h1>
						<ul>
							<li>Le mot acceuil</li>
						</ul>
						
					</div><!-- end -->
				</a>
			</li>
			<li id="kooka">
				<a href="#kooka">
					<div class="face01">
						<span>@kooka</span>
					</div><!-- end -->
					<div class="face02">
						<h1>Il aime:</h1>
						<ul>
							<li>La bière</li>
						</ul>
						<h1>Il n'aime pas:</h1>
						<ul>
							<li>Les légumes</li>
						</ul>
					</div><!-- end -->
				</a>	
			</li>
			<li id="bourgaux"><a href="#bourgaux">
			<div class="face01">
						<span>@fbourgaux</span>
					</div><!-- end -->
					<div class="face02">
						<h1>Il aime:</h1>
						<ul>
							<li>Le noir</li>
						</ul>
						<h1>Il n'aime pas:</h1>
						<ul>
							<li>Le blanc</li>
						</ul>
					</div><!-- end -->
					</a></li>
			<li id="emeric"><a href="#emeric">
			<div class="face01">
						<span>@boblemarin</span>
					</div><!-- end -->
					<div class="face02">
						<h1>Il aime:</h1>
						<ul>
							<li>Les blagues</li>
						</ul>
						<h1>Il n'aime pas:</h1>
						<ul>
							<li></li>
						</ul>
					</div><!-- end -->
			</a></li>
		</ul>

dabblet.js

// alert('Hello world!');

settings.json

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