css3翻书效果

来源：互联网发布：mysql主键可以重复吗编辑：程序博客网时间：2024/05/02 21:07

实现一个比较简单的翻书效果，还有少许问题需要解决。鼠标放在页面上，可以实现向左翻页或者向右。

<!DOCTYPE HTML><html><head><style>.page {  border: 1px solid #333;  box-shadow: 2px 2px 5px #333;  width: 120px;  height:200px;  background-color: white;  padding: 10px 10px 10px 5px;  float: right;  position: absolute;  top: 0px;  left: 0px;  -webkit-transform-origin: left;}.headpage {  margin: 200px 700px 0 -139px;}.innerpage {  margin: 200px 0 0 -139px;}.flippage {  -webkit-transform: rotate3d(0,1,0,-180deg);  -webkit-transform-origin: left;  -webkit-transition:ease all 1.3s;}.flipback {  -webkit-transform: rotate3d(0,1,0,0deg);  -webkit-transform-origin: left;  -webkit-transition:ease all 1.3s;}</style><script type="text/javascript">function flip(){var classes = event.target.className.split(" ");if(classes[classes.length - 1] == "flippage"){classes[classes.length - 1] = "flipback";} else if(classes[classes.length - 1] == "flipback"){classes[classes.length - 1] = "flippage";} else {classes.push("flippage"); }event.target.style.zIndex *= -1;event.target.className = classes.join(" ");}var pages = [];function initPages(){var pages = document.getElementsByTagName("article");for(var i=0; i< pages.length; i++){pages[i].style.top = "200px";pages[i].style.left = "400px";pages[i].style.zIndex = 0 - i;}}</script></head><body><article class="page" onclick="flip()">封面</article><article class="page" onclick="flip()">page1</article><article class="page"  onclick="flip()">page2</article><article class="page"  onclick="flip()">page3</article><article class="page"  onclick="flip()">page4</article><article class="page"  onclick="flip()">page5</article><script type="text/javascript">initPages();</script></body></html>

问题：

1）使用transform的rotate，旋转180度后，页面也翻了180度，内容成了镜像效果；另外如何实现双面的内容的翻页效果呢？

2）在翻到后面2页，明显感觉翻书的效果不太理想，不理解是不是浏览器的解析处理问题，有待查证；

本代码仅仅提供了基本的翻书动作，还有很多问题需要解决。

0 0