这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效。该特效中文字被制作为浮雕文字，就像是从一块石板上将文字雕刻下来的一样。而且文字还会来回的摆动旋转，效果非常好。
制作方法
HTML结构
该CSS3文字特效的HTML结构是在一个
容器中放置20个空的层制作出来的，本身并没有使用任何的文字。
CSS样式
首先包裹容器.stage使用perspective属性来制作为3D空间。
.stage {
height: 300px;
width: 500px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 9999px;
transform-style: preserve-3d;
}
每一个DIV层使用transform-style: preserve-3d;来使其具有立体感。由于IE浏览器不支持这个属性，所以看起来是平面的。同时他们还执行了一个CSS3 animation动画。
.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
opacity: 0;
animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}
真正的文字是使用.layer:after伪元素来制作的。
.layer:after {
font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
content: 'Pure\A css!';
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -2px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}
最后，特效中为每一个层绕Z轴旋转一个指定的角度，并为指定的层添加阴影效果，使其具有立体感。
.layer:nth-child(1):after {
transform: translateZ(0px);
}
.layer:nth-child(2):after {
transform: translateZ(-2px);
}
...
.layer:nth-child(n+10):after {
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}
.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}
.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}
.layer:first-child:after {
color: #fff;
text-shadow: none;
}
