CSS3三维旋转模拟书本翻页效果
其实主要就是应用transform:rotateY()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3三维旋转模拟书本翻页效果</title>
<meta name="description" content="CSS3三维旋转模拟书本翻页效果">
</head>
<style>
@keyframes rotate-frame{
0%{transform: rotateY(0deg);}
50%{transform:rotateY(-180deg);}
100%{transform:rotateY(0deg);}
}
body{
background:gray;
color:white;
text-align:center;
}
.book{
position:absolute;
margin-top:200px;
margin-left:500px;
}
.page{
position:absolute;
perspective:800px; /*perpective属性非常重要,缺少这个属性就没有透视效果了!*/
width:200px;
height:300px;
background:white;
box-shadow:0px 0px 200px #333333;
}
.cover,.booktitle{
position:absolute;
width:200px;
height:300px;
background:red;
transform-origin:0px 0px 0px; /*ransform-origin属性表示变形发起原点,设置错误会效果混乱!*/