还没看视频，自己写了下。
html>
动画
#ex{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: -webkit-preserve-3d;
}
.block{
display: flex;
width: 100vw;
height: 100vh;
margin: 0 auto;
position: relative
}
.kuai{
width: 200px;
height: 200px;
background-color: #000;
text-align: center;
line-height: 200px;
color:#fff;
font-size: 80px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -200px;
transition: -webkit-transform 1.5s;
}
#font2, #font3, #font4, #font5, #font6{
-webkit-transform-origin: center bottom;
-webkit-transform: rotateX(90deg);
}
pre
last
let pre = document.getElementById(“pre”);
let last = document.getElementById(“last”);
let flag = 1
pre.onclick = function () {
if (flag == 6) {
return;
}
let nextflag = flag + 1
let current = document.getElementById(“font” + flag);
let next = document.getElementById(“font” + nextflag);
current.style = “-webkit-transform-origin: center bottom; -webkit-transform: rotateX(-90deg);”
next.style = “-webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg);”
flag = flag + 1
}
last.onclick = function () {
if (flag == 1) {
return;
}
let nextflag = flag – 1
let current = document.getElementById(“font” + flag);
let next = document.getElementById(“font” + nextflag);
current.style = “-webkit-transform-origin: center bottom; -webkit-transform: rotateX(90deg);”
next.style = “-webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg);”
flag = flag – 1
}