<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>create effect of 3D</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#my3d{
/* 加入hidden 避免对其他元素造成影响 */
overflow: hidden;
perspective: 800px;
perspective-origin: 50% 50%;
}
.page-group{
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
/* 规定渲染 */
transform-style:preserve-3d;
}
.page{
width: 360px;
height: 360px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color:#fff;
font-size: 360px;
font-weight: bold;
position: absolute;
transition: transform 1s linear;
}
.page1{
transform-origin: bottom;
}
.page2,.page3,.page4,.page5,.page6{
transform-origin: bottom;
transform: rotateX(90deg);
}
#op,.think{
display: grid;
place-items: center;
}
</style>
</head>
<body>
<div >
<div class="page-group">
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
<div class="page page5">5</div>
<div class="page page6">6</div>
</div>
</div>
<div >
<button onclick="next()">next</button>
<button onclick="previous()">previous</button>
</div>
<br><br>
<hr>
<br><br>
<div class="think">
<h4>思路</h4>
<br>
<p>page1一开始铺在屏幕上，其他的页面横向的铺在屏幕里面</p>
</div>
<script>
let curIndex = 1;
function next(){
if(curIndex==6){
return
}
let curPage = document.querySelector(".page"+curIndex);
// 当前页面向前方 90°
curPage.style.webkitTransform = "rotateX(-90deg)"
curIndex++
// 下一个页面向前 90°
let nextPage = document.querySelector(".page"+curIndex)
nextPage.style.webkitTransform = "rotateX(0deg)"
}
function previous(){
if(curIndex==1){
return
}
let curPage = document.querySelector(".page"+curIndex);
// 当前页面向前方 90°
curPage.style.webkitTransform = "rotateX(90deg)"
curIndex--
// 下一个页面向前 90°
let nextPage = document.querySelector(".page"+curIndex)
nextPage.style.webkitTransform = "rotateX(0deg)"
}
</script>
</body>
</html>来自 ： https://www.bilibili.com/video/BV1ei4y137we?p=10
