<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: #ccc;
}
.book {
width: 400px;
height: 600px;
margin:100px auto 50px;
transform-style: preserve-3d;
/* 近大远小效果 */
perspective: 1200px;
/* position: relative; */
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
#page1,#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9{
position: relative;
transition: all .5s;
transform-origin: left;
transform-style: preserve-3d;
left:0;
top:0;
}
#page1 {
z-index: 9;
}
#page2{
z-index: 8;
}
#page3{
z-index: 7;
}
#page4{
z-index: 6;
}
#page5 {
z-index: 5;
}
#page6{
z-index: 4;
}
#page7{
z-index: 3;
}
#page8{
z-index: 2;
}
#page9{
z-index: 1;
}
.page-front {
position: absolute;
background-color: greenyellow;
left: 0;
top:0;
width: 400px;
height: 600px;
border:8px solid #fff;
box-sizing: border-box;
font-size: 28px;
line-height: 300px;
text-align: center;
backface-visibility: hidden;
}
.page-back {
width: 400px;
height: 600px;
box-sizing: border-box;
border:8px solid #fff;
position: absolute;
background-color: #EEE;
left: 0;
top:0;
}
.class-group-btn {
display: flex;
width: 200px;
justify-content: space-between;
margin:auto;
}
.class-group-btn>div{
overflow: hidden;
width: 200px;
position: relative;
background: lightpink;
height: 60px;
line-height: 60px;
text-align: center;
transition: all .5s;
}
.class-group-btn>div:hover {
background-color: #fff;
}
.class-group-btn>div:hover a {
color:purple;
}
.class-group-btn>div:hover .border-top {
right: 0px;
}
.class-group-btn>div:hover .border-bottom {
left: 0px;
}
.class-group-btn>div>a {
text-decoration: none;
color: dodgerblue;
font-size: 28px;
}
.border-top {
position: absolute;
background-color: greenyellow;
top:0px;
right:-200px;
height: 8px;
width: 200px;
transition: all .5s;
}
.border-bottom {
position: absolute;
background-color: greenyellow;
transition: all .5s;
bottom:0px;
height: 8px;
left: -200px;
width: 200px;
}
</style>
<body>
<div class="book">
<div id="page1">
<div class="page-back"></div>
<div class="page-front">
HTML5
</div>
</div>
<div id="page2">
<div class="page-back"></div>
<div class="page-front">CSS3</div>
</div>
<div id="page3">
<div class="page-back"></div>
<div class="page-front">JAVASCRIPT</div>
</div>
<div id="page4">
<div class="page-back"></div>
<div class="page-front">JAVAEE</div>
</div>
<div id="page5">
<div class="page-back"></div>
<div class="page-front">ORACLE</div>
</div>
<div id="page6">
<div class="page-back"></div>
<div class="page-front">SQLSERVER</div>
</div>
<div id="page7">
<div class="page-back"></div>
<div class="page-front">SOLR</div>
</div>
<div id="page8">
<div class="page-back"></div>
<div class="page-front">MONGDB</div>
</div>
<div id="page9">
<div class="page-back"></div>
<div class="page-front">LINUX</div>
</div>
</div>
<div class="class-group-btn">
<div>
<div class="border-top"></div>
<a href="#" class="clickme">点我翻页</a>
<div class="border-bottom"></div>
</div>
<!-- <div>
<div class="border-top"></div>
<a href="javascript(0)">HTML5</a>
<div class="border-bottom"></div>
</div>
<div>
<div class="border-top"></div>
<a href="javascript(0)">JAVASCRIPT</a>
<div class="border-bottom"></div>
</div> -->
</div>
</body>
<script>
var book = document.querySelector('.clickme')
var index = 0
var pagedom = document.querySelectorAll("[id^='page']")
book.onclick = function(){
if(index < pagedom.length -1 ){
pagedom[index].style.transform = "rotateY(-145deg)";
index++
} else {
//
for (let i = 0; i < pagedom.length; i++) {
// setTimeout(_=>{
pagedom[i].style.transform = "rotateY(0deg)";
// },i*100)
}
index = 0
}
}
</script>
</html>
css3实现翻书特效
最新推荐文章于 2024-04-08 09:44:17 发布