CSS3简单特效–transform实现翻书效果
上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。
可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步：
1、父级中加入视距：perspective:800px;
2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d;
3、设置观看视角：perspective-origin:center center;（这个值不设置的话默认为center）。
3D场景设置好后，每一个书页为一个矩形，黄色的虚线边框利用ul标签套五个li。要实现li沿左边距旋转，需使用css3中transform属性，下面给大家介绍一下在使用transform属性时常用值~
设置旋转中心属性：transform-origin:x轴点 y轴点;（可以设置像素值也可以设置center、left等）。
设置旋转方式：transform:rotate();（围绕X轴旋转为rotateX(),Y、Z轴同理，括号中填旋转的角度deg）。
给父级设置3d层主要代码如下
body{
background-color: black;
perspective: 800px;
}
ul{
position: relative;
width: 200px;
height: 300px;
box-shadow: 0px 0px 5px 1px gold;
margin: 200px auto;
transform-style: preserve-3d;
}
ul li{
position: absolute;
border: 1px dashed gold;
width: 200px;
height: 300px;
transform-origin:0px center;
}
一般3D层给实现3D效果的父盒子，视距给最大的盒子body。
在给子元素设置旋转角度过程中，使用伪类选择器可以减少内存的占用，这里使用到:nth-child()伪类。
主要css代码如下：
ul:hover li:nth-child(1){
transform:rotateY(-180deg);
}
ul:hover li:nth-child(2){
transform:rotateY(-160deg);
}
ul:hover li:nth-child(3){
transform:rotateY(-150deg);
}
ul:hover li:nth-child(4){
transform:rotateY(-140deg);
}
ul:hover li:nth-child(5){
transform:rotateY(-130deg);
}
最后为了实现书页每页翻动时有延时间隔，使用过度属性transition实现过度动画效果。（transition:transition-property(过度属性) transition-duration(过度时间) transition-timing-function(动画类型) transition-delay(延时时间)，例如transition:all 2s linear .5s;的意思是所有元素动画延时0.5秒以线性效果2秒完成）
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background-color: black;
perspective: 800px;
}
ul{
position: relative;
width: 200px;
height: 300px;
box-shadow: 0px 0px 5px 1px gold;
margin: 200px auto;
transform-style: preserve-3d;
}
ul li{
position: absolute;
border: 1px dashed gold;
width: 200px;
height: 300px;
transform-origin:0px center;
/* background-color: white; */
}
ul:hover{
transform:rotateX(30deg);
transition:all 2s;
}
ul:hover li:nth-child(1){
transform:rotateY(-180deg);
transition:all 2s .5s;
}
ul:hover li:nth-child(2){
transform:rotateY(-160deg);
transition:all 2s .8s;
}
ul:hover li:nth-child(3){
transform:rotateY(-150deg);
transition:all 2s 1s;
}
ul:hover li:nth-child(4){
transform:rotateY(-140deg);
transition:all 2s 1.2s;
}
ul:hover li:nth-child(5){
transform:rotateY(-130deg);
transition:all 2s 1.4s;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
简单的css3翻书动画效果就实现啦，对你有帮助的话点个赞支持下哦~
