<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
background: #34c4e6;
}
p{
color: aliceblue;
font-family: "微软雅黑";
font-size: 8em;;
font-weight: bold;
text-align: center;
}
p span{position: relative;}
p span:before{
content: attr(data-text);
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
color: #34c4e6;
transform-origin: left top;
transform:rotateY(-40deg);
text-shadow: 1px 1px 0 #34869a;
z-index: 2;
}
p span:hover::before{
color: #34c4e6;
transform:rotateY(0);
}
p span:after{
content: attr(data-text);
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
color:rgba(0,0,0,0.2);
transform-origin: left top;
transform:skew(0deg,20deg);
}
p span:hover::after{
color: #684da3;
transform:rotateY(0);
}
</style>
<body>
<p>
<span data-text="郭">郭</span>
<span data-text="垒">垒</span>
<span data-text="好">好</span>
</p>
</body>
</html>
原文：http://my.oschina.net/u/2255569/blog/407362