使用CSS写正方体，结合JS实现3D轮播图

立体轮播图

• 代码+界面呈现
  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轴就变成平行屏幕的方向了。这点掌握了，就可以轻松写立体图形了