立體輪播圖

• 代碼+界面呈現(xiàn)
  HTML

<div class="pox"><ul class="box"><li class="one"><img src="./img/img1.jpg" alt=""></li><li class="two"><img src="./img/img2.jpg" alt=""></li><li class="three"><img src="./img/img3.jpg" alt=""></li><li class="four"><img src="./img/img4.jpg" alt=""></li><li class="five"><img src="./img/img5.jpg" alt=""></li><li class="six"><img src="./img/img6.jpg" alt=""></li></ul></div>

CSS

body,html,div,ul,li {margin: 0;padding: 0;}.pox{position: relative;perspective: 1600px;border: 1px solid #000;margin: 0 auto;width: 300px;height: 300px;}.box {height: 300px;margin: 0 auto;position: relative;transform-style: preserve-3d;width: 300px;transition: 2s;}.box>li {width: 300px;height: 300px;list-style: none;text-align: center;line-height: 300px;font-size: 30px;position: absolute;}.box>li>img {width: 300px;height: 300px;}.one {background: rgba(255, 0, 5, 0.3);transform: translateZ(150px);}.two {background: rgba(220, 104, 44, 0.3);transform: rotateY(90deg) translateZ(150px);}.three {background: rgba(255, 239, 0, 0.3);transform: translateZ(-150px) rotate(180deg);}.four {background: rgba(86, 255, 0, 0.3);transform: rotateY(-90deg) translateZ(150px);}.five {background: rgba(0, 76, 255, 0.3);transform: rotateX(90deg) translateZ(150px);}.six {background: rgba(168, 0, 255, 0.3);transform: rotateX(-90deg) translateZ(150px);}

效果：如下圖的一個(gè)正方體

調(diào)整為輪播圖需要添加JS部分：效果每間隔3s中會(huì)輪播一次，為什么是3s因?yàn)檎襟w每次旋轉(zhuǎn)的時(shí)間用去了2s

function scroll() {var time = 90;var num = 0;setInterval(function () {num++$('.box').css({ "transform": "rotateY(" + time*num + "deg)" })}, 5000) } scroll()

知識(shí)點(diǎn)：

• 布局：

1.外層標(biāo)簽.pox：第一個(gè)div（.pox）使用了perspective:1600px屬性來實(shí)現(xiàn)景深,同時(shí)設(shè)置一個(gè)基準(zhǔn)平面作為參照——觀察者距離距離z=0平面的距離，如果正方體的面都是透明的，那么會(huì)有可透視的效果，如果z>0，元素看起來會(huì)比正常要偏大，反之則偏小
2.外層標(biāo)簽.box：第二個(gè)div（.box）保留3d效果，transform-style: preserve-3d
3.內(nèi)層的6個(gè)li標(biāo)簽則分別是正方體的6個(gè)面，主要通過旋轉(zhuǎn)和位移調(diào)整

• 關(guān)于translate()
  需要注意的是該屬性的X,Y,Z軸始終是針對(duì)元素當(dāng)前的位置來說的，什么意思?例如：對(duì)于正對(duì)觀察者的元素，垂直屏幕的軸就是Z軸，但是如果該元素圍繞Y軸旋轉(zhuǎn)了90deg之后，那么相對(duì)于該元素來講，Z軸就變成平行屏幕的方向了。這點(diǎn)掌握了，就可以輕松寫立體圖形了

總結(jié)

以上是生活随笔為你收集整理的使用CSS写正方体，结合JS实现3D轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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