原生JS实现翻页效果
2017-04-27 本文已影响0人
LorenaLu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3翻书效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body,html {
height: 100%;
}
li{
list-style: none;
}
body {
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;/*3D视角距离*/
background-color: #212121;
}
.book {
position: absolute;
top: 30%;
left: 40%;
width: 500px;
height: 500px;
background-color: #fff;
-webkit-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
/*开3D效果*/
.pre-3d {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d; /*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素:子元素将保留其 3D 位置*/
}
.page {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #1976D2;
/*text-align: center;*/
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
img{
width: 100%;
height: 100%;
}
#Rcover{
width: 500px;height: 500px;
}
</style>
</head>
<body>
<div class="book pre-3d" id="book">
<ul>
<!-- 后封面 -->
<li class="" id="Rcover"></li>
<!-- 书页 -->
<li class="pre-3d page"></li>
<li class="pre-3d page"></li>
<li class="pre-3d page"></li>
<li class="pre-3d page"></li>
<!-- 书的封面 -->
<li class="pre-3d page"></li>
</ul>
</div>
</body>
<script>
var b=document.getElementById('book');
var s=document.getElementsByTagName('li');
var c=document.getElementById('Rcover');
var i=5;
b.onclick=function(){
if(i>0){
s[i].style.transform='rotateY(-140deg)';
s[i].style.transition='3s';//动画需要的时间3s
console.log(i);
i--;
}
}
c.onclick=function(){
for(var j=1;j<6;j++){
s[j].style.transform='rotateY(0deg)';
s[j].style.transition='3s';
}
}
</script>
</html>
