參照CSS3景深、三維變換屬性及旋轉(zhuǎn)三維立方體的實現(xiàn)

.stage1 {width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;perspective: 500px;/* perspective-origin: 10px 10px;//舞臺元素的中心位置 默認(rèn)perspective-origin: 50% 50%; */}.stage1 .demo {width: 200px;height: 200px;background-color: orangered;transform: rotateX(45deg);}ul {/*調(diào)整ul標(biāo)簽的樣式，取消內(nèi)邊距、外邊距，和“點”樣式*/padding: 0;margin: 0;list-style-type: none;}.stage {/*設(shè)置舞臺元素在屏幕居中，設(shè)置合適的景深大小*/position: relative;width: 800px;height: 800px;margin: 100px auto;perspective: 800px;}@keyframes move {/*設(shè)置動畫關(guān)鍵幀*/0% {transform: rotateX(0deg);}25% {transform: rotateX(180deg);}50% {transform: rotateX(360deg) rotateY(0deg);}75% {transform: rotateX(360deg) rotateY(180deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}.stage .three-d-box {/*動畫容器居中在舞臺元素中間*/width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -100px;transform-style: preserve-3d;/*設(shè)置3D屬性讓子元素三維空間呈現(xiàn)*/animation: move 3s linear infinite;/*設(shè)置動畫*/}.stage .three-d-box>li {/*設(shè)置動畫子元素公共屬性*/position: absolute;width: 200px;height: 200px;left: 0;top: 0;font-size: 50px;line-height: 200px;text-align: center;opacity: 0.5;}/*為了保證我們對立方體位置的控制，我們需要讓動畫容器在立方體的中間位置*/.stage .three-d-box>li:nth-child(1) {background-color: red;transform: translateZ(-100px);}.stage .three-d-box>li:nth-child(2) {background-color: yellow;transform: translateZ(100px);}.stage .three-d-box>li:nth-child(3) {background-color: blue;transform: rotateX(90deg) translateZ(100px);}.stage .three-d-box>li:nth-child(4) {background-color: green;transform: rotateX(-90deg) translateZ(100px);}.stage .three-d-box>li:nth-child(5) {background-color: black;transform: rotateY(90deg) translateZ(100px);}.stage .three-d-box>li:nth-child(6) {background-color: purple;transform: rotateY(-90deg) translateZ(100px);} <div class="stage1"><div class="demo">1</div></div><!--舞臺元素，視角所在--><div class="stage"><!--動畫容器，通過它來控制整個立方體--><ul class="three-d-box"><li>紅</li><!--動畫元素，立方體的六個面--><li>黃</li><li>藍</li><li>綠</li><li>黑</li><li>紫</li></ul></div>

總結(jié)

以上是生活随笔為你收集整理的3D景深探究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。