用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效

这是一款效果非常酷的纯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;