看效果图这些文字是不是很有立体的感觉，而这个立体的感觉并不是有投影和阴影来实现的，而是通过翻转。
接下来我们来看一下源码。首先是html代码，非常简单，列出我们需要渲染的文字：
<p class="foo"> <span class="letter" data-letter="a">a</span> <span class="letter" data-letter="b">b</span> <span class="letter" data-letter="c">c</span> <span class="letter" data-letter="d">d</span> <span class="letter" data-letter="e">e</span> <span class="letter" data-letter="f">f</span> <span class="letter" data-letter="g">g</span> <span class="letter" data-letter="h">h</span> <span class="letter" data-letter="i">i</span> <span class="letter" data-letter="l">l</span> <span class="letter" data-letter="m">m</span> <span class="letter" data-letter="n">n</span> <span class="letter" data-letter="o">o</span> <span class="letter" data-letter="p">p</span> <span class="letter" data-letter="q">q</span> <span class="letter" data-letter="r">r</span> <span class="letter" data-letter="s">s</span> <span class="letter" data-letter="t">t</span> <span class="letter" data-letter="u">u</span> <span class="letter" data-letter="v">v</span> <span class="letter" data-letter="z">z</span></p>
接下来是核心css3代码，这里我们略去了控制页面样式的css代码，把实现翻页效果文字的css代码提取出来。
.letter{ display: inline-block; font-weight: 900; font-size: 8em; margin: 0.2em; position: relative; color: #00b4f1; transform-style: preserve-3d; perspective: 400; z-index: 1; }
这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的css3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。(#00b4f1是什么颜色?#00b4f1是蓝色)
.letter:before, .letter:after{ position:absolute; content: attr(data-letter); transform-origin: top left; top:0; left:0; }.letter, .letter:before, .letter:after{ transition: all 0.3s ease-in-out; }.letter:before{ color: #fff; text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8); z-index: 3; transform: rotatex(0deg) rotatey(-15deg) rotatez(0deg); }.letter:after{ color: rgba(0,0,0,.11); z-index:2; transform: scale(1.08,1) rotatex(0deg) rotatey(0deg) rotatez(0deg) skew(0deg,1deg); }.letter:hover:before{ color: #fafafa; transform: rotatex(0deg) rotatey(-40deg) rotatez(0deg); }.letter:hover:after{ transform: scale(1.08,1) rotatex(0deg) rotatey(40deg) rotatez(0deg) skew(0deg,22deg); }
这里我们利用了css3的伪类before和after来快速构造两个相同的字母，然后利用transform属性的rotatex，rotatey，rotatez来翻转，再利用skew来时文字倾斜。
以上就是简单做出html5翻页效果文字特效的内容。
相关文章：
css比较常用的翻转特效
css实现3d立方体旋转特效的示例代码
详细介绍html5 3d衣服摇摆动画特效如何实现