利用CSS，实现翻页效果
利用css的3d效果，实现一个简单的翻页器。
·
利用css3的3d效果，实现一个简单的翻页器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d翻页动画</title>
</head>
<style>
.box {
position: relative;
margin: 100px auto;
width: 160px;
height: 200px;
background: #f0ddca;
transform: perspective(600px); /*开启透视*/
transform-style: preserve-3d; /*保持子元素的3d效果*/
box-shadow: 2px 5px 6px #666666;
}
.page {
position: absolute;
width: 100%;
height: 100%;
transition: all .8s ease-in-out;
transform-origin: left;
transform-style: preserve-3d; /*保持子元素的3d效果*/
}
.next_page {
transform: rotateY(-180deg);
}
.pre_page {
transform: rotateY(0deg);
}
.box .page .front,.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /*元素背面朝屏幕时背景不可见*/
}
.box .page .front {
background: #0a60bd;
}
.box .page .back {
background: #0fbf60;
transform: rotateY(180deg);
}
</style>
<script>
window.onload = () => {
const next = document.querySelector(".next");
const pre = document.querySelector(".pre");
const pages = document.querySelectorAll(".page")
let index = 0;
next.addEventListener('click', () => {
if(index <2) {
pages[index].classList.remove("pre_page")
pages[index].classList.add("next_page")
index ++
}
})
pre.addEventListener('click', () => {
if(index >0) {
pages[index -1].classList.add("pre_page")
pages[index -1].classList.remove("next_page")
index --
}
})
}
</script>
<body>
<div class="box">
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<button class="pre">上一页</button>
<button class="next">下一页</button>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)