要做到翻动，这是我编了一个模拟书籍翻页的效果。运用到CSS3@keyframes关键字，在创建动画时，把它连到一个选择器，并用百分比产生时间轴，然后就会看到动画效果翻页效果。如下是部分源码，请关注我，并与你分享，谢谢！<!DOCTYPEhtml>
<html>
<head>
<style>
body
{
perspective:1000px;
background-color:#212121;
}
.box
{
position:absolute;
top:50%;
left:50%;
……
}
.box1{
position:absolute;
top:0;
left:0;
width:200px;
height:300px;
border:1pxsolid#1976D2;
transform-origin:050%;
background:Beige;
animation:mybox5s;
}
……
@keyframesmybox
{
0%{transform:rotateY(0deg);}
50%{transform:rotateY(-150deg);}
100%{transform:rotateY(0deg);}
}
</style>
</head>
<body>
<divclass="box">
<p>第<br>二<br>页</p>
……
<p>
首<br>页
</p>
</div>
</div>
……
下面在手机AIDEWeb应用中运行结果