实现3d翻页
程序员文章站
2022-04-02 10:04:24
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition绘制翻页效果</title>
<style>
.btn{
margin:40px;
}
#book{
background-color: black;
margin: 40px;
width: 400px;
height: 200px;
padding: 0;
perspective: 800;
transform-style: preserve-3d;
-webkit-perspective: 800;
-webkit-transform-style: -webkit-preserve-3d;
}
#page1{
position: absolute;
width: 200px;
height: 200px;
background-color: grey;
transform-origin: right center;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
-webkit-transform-origin: right center;
}
#page2, #page3, #page4{
position: absolute;
width: 200px;
height: 200px;
background-color: grey;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
transform-origin: right center;
-webkit-transform-origin: right center;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#left{
float: left;
background-color: black;
margin-left: 40px;
width: 200px;
height: 200px;
padding: 0;
overflow: hidden;
perspective: 800;
transform-style: preserve-3d;
-webkit-perspective: 800;
-webkit-transform-style: -webkit-preserve-3d;
}
#right{
float: left;
background-color: black;
width: 200px;
height: 200px;
padding: 0;
overflow: hidden;
perspective: 800;
transform-style: preserve-3d;
-webkit-perspective: 800;
-webkit-transform-style: -webkit-preserve-3d;
}
#pagel1,#pagel2,#pagel3,#pagel4{
position: absolute;
width: 158px;
height: 158px;
background-color: grey;
padding: 20px;
transform-origin: right center;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
-webkit-transform-origin: right center;
border: 1px solid red;
}
#pagel2,#pagel3,#pagel4{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#pager1,#pager2,#pager3,#pager4{
position: absolute;
width: 158px;
height: 158px;
background-color: grey;
padding: 20px;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
transform-origin: left center;
-webkit-transform-origin: left center;
border: 1px solid red;
}
#pager1{
z-index: -10;
}
#pager2{
z-index: -20;
}
#pager3{
z-index: -30;
}
#pager4{
z-index: -40;
}
</style>
</head>
<body>
<div id="book">
<div id="page1">1</div>
<div id="page2">2</div>
<div id="page3">3</div>
<div id="page4">4</div>
</div>
<div class="btn">
<a href="javascript:prev()">上一页</a> <a href="javascript:next()">下一页</a>
</div>
<div id="left">
<div id="pagel1">第1页</div>
<div id="pagel2">第3页</div>
<div id="pagel3">第5页</div>
<div id="pagel4">第7页</div>
</div>
<div id="right">
<div id="pager1">第2页</div>
<div id="pager2">第4页</div>
<div id="pager3">第6页</div>
<div id="pager4">第8页</div>
</div>
<div style="clear:both;"></div>
<div class="btn">
<a href="javascript:prev2()">上一页</a> <a href="javascript:next2()">下一页</a>
</div>
<script>
var curIndex = 1;
function prev(){
if(1==curIndex) return;
var lPage = document.getElementById("page"+curIndex);
var llPage = document.getElementById("page"+(curIndex-1));
var rPage = document.getElementById("page"+(curIndex+1));
if(llPage)llPage.style.zIndex = 100;
if(rPage)rPage.style.zIndex = 0;
lPage.style.transform = "rotateY(180deg)";
lPage.style.webkitTransform = "rotateY(180deg)";
curIndex--;
}
function next(){
if(4==curIndex) return;
curIndex++;
var lPage = document.getElementById("page"+curIndex);
var rPage = document.getElementById("page"+(curIndex+1));
if(rPage)rPage.style.zIndex = 100;
lPage.style.transform = "rotateY(0deg)";
lPage.style.webkitTransform = "rotateY(0deg)";
}
var curPage = 1;
function prev2(){
if(1===curPage) return;
//左边翻页
var lPage = document.getElementById("pagel" + curPage);
lPage.style.transform = "rotateY(180deg)";
lPage.style.webkitTransform = "rotateY(180deg)";
//右边翻页
var rPage = document.getElementById("pager" + (curPage-1));
rPage.style.transform = "rotateY(0deg)";
rPage.style.webkitTransform = "rotateY(0deg)";
curPage--;
}
function next2(){
if(4===curPage) return;
//左边翻页
var lPage = document.getElementById("pagel" + (curPage+1));
lPage.style.transform = "rotateY(0deg)";
lPage.style.webkitTransform = "rotateY(0deg)";
//右边翻页
var rPage = document.getElementById("pager" + curPage);
rPage.style.transform = "rotateY(-180deg)";
rPage.style.webkitTransform = "rotateY(-180deg)";
curPage++;
}
</script>
</body>
</html>
上一篇： Python绘制3D散点