立體輪播圖

• 代碼+界面呈現
  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);}

效果：如下圖的一個正方體

調整為輪播圖需要添加JS部分：效果每間隔3s中會輪播一次，為什么是3s因為正方體每次旋轉的時間用去了2s

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

知識點：

• 布局：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。