简单做出HTML5翻页效果文字特效
之前在网上看到一款比较有新意的html5文字特效，文字效果是当鼠标滑过是出现翻开折叠的效果，类似书本翻页。于是我兴致勃勃的点开源码看了一下，发现其实实现也挺简单的，主要利用了css3的transform属性，分别对x轴、y轴、z轴进行翻转，先看一下效果截图。
看效果图这些文字是不是很有立体的感觉，而这个立体的感觉并不是有投影和阴影来实现的，而是通过翻转。
接下来我们来看一下源码。首先是HTML代码，非常简单，列出我们需要渲染的文字：
A B C D E F G H I L M N O P Q R S T U V Z
接下来是核心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翻页效果文字特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
相关文章：
