DEMO : CSS3 – effet 3D et profondeur de champs

Web

is just a

Poetry

 

?View Code CSS
#wrapper {
	text-align: center;
	font-weight: bold;
	font-family: 'Sansita One', cursive, Lucida, Verdana, sans-serif;
	margin: 10px auto;
	width: 600px;
	padding: 7em 0;
}
#wrapper:focus {
	outline: none;
}
#wrapper p {
	margin:0.8em 0;
	font-size: 5em;
	color: #9a1d0d;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	-webkit-transition: -webkit-transform 0.1s ease-in;
}
#wrapper:hover p {
	color: #9a1d0d;
	-webkit-transform: rotate(1deg) rotateX(28deg) skewX(-4deg);
	-moz-transform:  rotate(1deg);
	transform:  rotate(1deg);
	-webkit-transition: -webkit-transform 0.1s ease-out;
}
#wrapper:hover p:nth-child(1) {
	font-size: 4em;
	text-shadow: 	#9a1d0d 0 0 10px,
					#fff 0 4px 3px,
					#fff 0 9px 3px,
					#ccc 0 12px 1px,
					rgba(255,255,255,0.7) 0 14px 5px,
					rgba(255,255,255,0.1) 0 20px 10px,
					rgba(255,255,255,0.2) 0 15px 80px;
	text-indent: 0.3em;
}
#wrapper:hover p:nth-child(2) {
	font-size: 5em;
	text-shadow: 	#9a1d0d 0 0 1px,
					#eee 0 4px 3px,
					#ddd 0 9px 3px,
					#ccc 0 12px 1px,
					rgba(0,0,0,0.2) 0 14px 3px,
					rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,100,0.2) 0 15px 80px;
}
#wrapper:hover p:nth-child(3) {
	font-size: 6em;
	text-shadow: 	#9a1d0d 0 0 2px,
					#9a1d0d 0 4px 5px,
					#ddd 0 9px 5px,
					#ccc 0 12px 10px,
					rgba(0,0,0,0.2) 0 14px 5px,
					rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,100,0.2) 0 15px 80px;
}
#wrapper p:nth-child(2):hover {
	color:transparent;
	text-shadow: 	#9a1d0d 0 -5px 1px,
					#eee 0 -1px 3px,
					#ddd 0 4px 3px,
					#ccc 0 7px 1px,
					rgba(0,0,0,0.2) 0 15px 5px,
					rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,0,0.2) 0 15px 80px;
}
?View Code HTML
<div id="wrapper" contenteditable="true">
<p>Web</p>
<p>is just a</p>
<p>Poetry</p>
</div>