transform
transform浏览器支持
在 transform 中有一个 rotate 旋转属性，利用 rotate 可以做到书本翻页的效果
书本的翻页主要围绕书本轴线进行左右翻动书本
例子为书本从合起状态到打开状态首先定义一本书本 div
<style> .outbookPage { margin: 100px auto; width: 586px; height: 632px; perspective: 2000px; background:gray ; box-shadow: 0 0 10px #999; }</style><div class="outbookPage"> </div>
复制代码
效果：
在此 div 中设置好 perspective，这是用户相对于屏幕的远近距离，之后翻页效果出现时 perspective 值越近，翻转效果越明显。
在 outbookPage 中编写要进行旋转的子 div 元素
<style> .outbookPage { margin: 100px auto; width: 586px; height: 632px; perspective: 2000px; background:gray ; box-shadow: 0 0 10px #999; } .innerBookPage { width: 100%; height: 100%; background-color: #333333; /* 向外面旋转 */ transform: rotateY(-40deg); transform-origin: 0 0; font-size: 40px; text-align: center; color: white; z-index: 5; }</style><div class="outbookPage"> <div class="innerBookPage"> 封面 </div></div>
复制代码
效果： 当前为静态效果，如果想要制作完整的动画翻页效果可以使用 animation，但是需要注意的是 animation 只能支持 IE10+。tansform:rotateY( 定义的角度 ) 代表让 div 元素绕 Y 轴进行 3d 旋转。 rotateY 也只支持 IE10+在封面 div 旋转到背面之后可以使用 backface-visibility: hidden; 对背面进行隐藏。此时封面旋转到一般就消失了
为了让封面旋转到一半后消失出现第一页，可以给封面 div 添加兄弟元素，即第一页的 div。
注意此处第一页的 div 需要进行 180 度翻转，这样旋转之后才能正向显示。同样需要进行背部隐藏： backface-visibility: hidden;
动作的进行可以使用 animation 动画，定一个 @keyframes 效果来进行翻页运动
不过值得注意的是，animation 只兼容 IE10 及以上
完整代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .outbookPage { margin: 100px auto; width: 586px; height: 632px; perspective: 2000px; background:gray ; background-position: 100% 0%; box-shadow: 0 0 10px #999; } .innerBookPage { width: 100%; height: 100%; background-color: #333333; /* 向外面旋转 */ transform: rotateY(-20deg); transform-origin: 0 0; animation: openbook 3s forwards; font-size: 40px; text-align: center; color: white; backface-visibility: hidden; z-index: 5; } .innerfirstPages { width: 100%; height: 100%; background: burlywood; background-size: 100% 100%; position: absolute; top: 0; left: -100%; font-size: 40px; text-align: center; animation: openbook2 3s forwards; transform: rotateY(180deg); transform-origin: 100% 0; backface-visibility: hidden; } @keyframes openbook{ 0%{ transform: rotateY(0deg) scaleX(1); } 100%{ transform: rotateY(-180deg) scaleX(1); } } @keyframes openbook2{ 0%{ transform: rotateY(180deg) scaleX(1); } 100%{ transform: rotateY(0deg) scaleX(1); box-shadow: 0 0 10px #999; } } </style> </head> <body> <div class="outbookPage"> <div class="innerBookPage"> 封面 </div> <div class="innerfirstPages"> 第一页内容 1111111111111 222222222222222 </div> </div> </body></html>
复制代码
效果：
评论