3D text

dabblet.css

/**
 * 3D text
 */

body {
	perspective: 600px;
	width: 100%;
}

#wrap {
	border: 1px solid #000;
	width: 200px;
	height: 200px;
	margin: 0 auto;
	perspective: 100%;
	transform: rotateY(75deg);
	transform-style: preserve-3d;
	transition: transform 1s ease-out;
}

body:hover #wrap {
	transform: rotateY(-75deg);
}

#text,
#text + div,
#text + div + div,
#text + div + div + div,
#text + div + div + div + div,
#text + div + div + div + div + div,
#text + div + div + div + div + div + div,
#text + div + div + div + div + div + div + div,
#text + div + div + div + div + div + div + div + div,
#text + div + div + div + div + div + div + div + div + div {
	background: transparent;	
	float:left;
	font-size: 100px;
	line-height: 200px;
	font-family: Helvetica, sans-serif;
	position: absolute;
}

#text {
	z-index: 10;
}

#text + div {
	color: #333;
	transform: translateZ(-1px);
	z-index: 9;	
}


#text + div + div {
	color: #555;
	transform: translateZ(-2px);	
	z-index: 8;
}


#text + div + div + div {
	color: #666;
	transform: translateZ(-3px);	
	z-index: 7;
}

#text + div + div + div + div{
	color: #777;
	transform: translateZ(-4px);	
	z-index: 6;
}


#text + div + div + div + div + div{
	color: #888;
	transform: translateZ(-5px);	
	z-index: 5;
}


#text + div + div + div + div + div + div {
	color: #999;
	transform: translateZ(-6px);	
	z-index: 4;
}


#text + div + div + div + div + div + div + div{
	color: #aaa;
	transform: translateZ(-7px);	
	z-index: 3;
}


#text + div + div + div + div + div + div + div + div{
	color: #bbb;
	transform: translateZ(-8px);	
	z-index: 2;
}


#text + div + div + div + div + div + div + div + div + div {
	color: #ccc;
	transform: translateZ(-9px);	
	z-index: 1;
}

dabblet.html

<div id="wrap">
	<div id="text">30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
	<div>30%</div>
</div>

settings.json

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