【需求描述】css实现翻书效果。
<!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>css实现翻书效果</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: skyblue;
}
.book{
width: 200px;
height: 300px;
position: relative;
margin: 100px auto;
/* 设置元素的子元素是位于3D空间还是平面中 */
transform-style: preserve-3d;
/* 景深效果：由远及近，从大到小 */
perspective: 800px;
}
#page1,#page2,#page3,#page4{
transform-origin: left;
transform-style:preserve-3d;
position: absolute;
left: 0;
top: 0;
}
#page1{
z-index: 4;
}
#page2{
z-index: 3;
}
#page3{
z-index: 2;
}
#page4{
z-index: 1;
}
.page-front{
width: 200px;
height: 300px;
background: #fff;
/* 元素背向观察者时，不可见 */
backface-visibility: hidden;
}
.page-back{
width: 200px;
height: 300px;
background: #ccc;
transform: rotateY(180deg);
}
.page-front,.page-back{
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: end;
}
</style>
</head>
<body>
<div class="book">
<div id="page1">
<div class="page-back">2</div>
<div class="page-front">1</div>
</div>
<div id="page2">
<div class="page-back">4</div>
<div class="page-front">3</div>
</div>
<div id="page3">
<div class="page-back">6</div>
<div class="page-front">5</div>
</div>
<div id="page4">
<div class="page-back">8</div>
<div class="page-front">7</div>
</div>
</div>
<script>
var bookDom = document.querySelector(".book");
var pageDoms = document.querySelectorAll("[id^='page']");
var currentIndex = 0;
bookDom.onclick = function(){
if(currentIndex >= pageDoms.length){
currentIndex = 0;
reset();
return;
}
pageDoms[currentIndex].style.transition = "2s";
pageDoms[currentIndex].style.transform = "rotateY(-135deg)";
pageDoms[currentIndex].style.zIndex = ++currentIndex;
}
function reset(){
resetZindex();
resetRotate();
}
function resetZindex(){
pageDoms.forEach(function(pageDom,index){
pageDom.style.zIndex = pageDoms.length - index;
});
}
function resetRotate(){
pageDoms.forEach(function(pageDom,index){
pageDom.style.transform = "rotateY(0)";
})
}
</script>
</body>
</html>