原生JS实现翻书特效原生JS实现翻书特效

【原生JS实现翻书特效】本文给大家分享一个用原生JS实现的翻书效果图，效果如下：

实现代码如下，欢迎大家复制粘贴。

原生JS实现翻书特效 - 锐客网* {margin: 0; padding: 0; list-style: none; } #btn {width: 50px; height: 40px; line-height: 40px; position: relative; left: 50%; margin-left: -25px; top: 100px; } #book {width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -300px; border: 1px solid black; /* 第一个封面 */background: url(images/0.jpg); } #rightPage {width: 50%; height: 100%; position: absolute; left: 50%; z-index: 2; transition: 0.5s; transform: perspective(800px) rotateY(0px); transform-origin: left center; background: black; transform-style: preserve-3d; } #rightPage #topNode {position: absolute; width: 100%; height: 100%; /* 第一个封面 */background: url(images/0.jpg) 300px 0; transform: translateZ(1px); } #rightPage #bottomNode {position: absolute; width: 100%; height: 100%; /* 第三个封面 */background: url(images/2.jpg) 0 0; /*scaleX将翻书镜像后的图像还原镜像*/transform: translateZ(-1px) scaleX(-1); } #rightOtherPage {position: absolute; left: 50%; height: 100%; width: 50%; /* 第三个封面 */background: url(images/2.jpg) 300px 0; z-index: 1; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。