效果圖：
move.gif
不太了解 perspective 屬性的，可以點(diǎn)擊查看此篇文章
景深一般用于3D場(chǎng)景內(nèi)汹来，會(huì)搭配著 transform 3D旋轉(zhuǎn)的使用
transform-style: preserve-3d;
一般這幾個(gè)transform屬性會(huì)應(yīng)用于景深效果中
image.png
面對(duì)屏幕，物體由遠(yuǎn)到近的調(diào)整
transform:translateZ()
物體以Z軸旋轉(zhuǎn)(在未定義3D旋轉(zhuǎn)的情況下等同于 transform:rotate())
transform:rotateZ()
物體以X軸旋轉(zhuǎn)
transform:rotateX()
物體以Y軸旋轉(zhuǎn)
transform:rotateY()
簡(jiǎn)單的就說這么多吧，景深這東西不太好解釋佳鳖，盡量自己動(dòng)手琢磨，比別人解釋給你聽更強(qiáng) ??
image.png
如果下面的代碼你能理解的話媒惕，那么上面 藍(lán)天白云效果 這種效果系吩，你就大致知道是怎么實(shí)現(xiàn)的了 ??
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
/* background: black; */
perspective: 100px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: absolute;
background: #5a5a5a;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transform: rotateX(90deg);
}
.cloud {
z-index: 5;
transform-style: preserve-3d;
transform-origin: 50% 100%;
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
opacity: 0;
animation-name: move;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: translateZ(-1000px);
}
.cloud:nth-child(1) {
background: black;
}
.cloud:nth-child(2) {
width: 300px;
left: 0;
background: #adacac;
animation-delay: -2s;
}
@keyframes move {
20%{
opacity: 1;
}
100% {
opacity: 1;
transform: translateZ(200px);
}
}
</style>
</head>
<body>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="box">
</div>
</body>
</html>
