css3 3d x y z 轴,CSS3 3D 特效

还没看视频，自己写了下。

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);

}

6

5

4

3

2

1

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

}