立体导航翻转案例

 <div class="box">
           <!-- 立方体 -->
           <ul>
               <li><img src="img1/1.jpg" alt=""></li>
               <li><img src="img1/2.jpg" alt=""></li>
               <li><img src="img1/3.jpg" alt=""></li>
               <li><img src="img1/4.jpg" alt=""></li>
           </ul>
           <!-- 按钮 -->
           <div class="btns">
               <a href="javascript:;"><</a>
               <a href="javascript:;">></a>
           </div>
      </div>

  
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }


        .box {
            width: 560px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 50px auto;

            position: relative;
        }

        ul {
            width: 100%;
            height: 100%;
            position: relative;
            /* 转化为立方体 */
            transform-style: preserve-3d;
        }

        li {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        /* 前面 */
        li:nth-child(1) {
            transform: translateZ(150px);
        }

        /* 上面 */
        li:nth-child(2) {
            transform: rotateX(90deg) translateZ(150px);
        }

        /* 后面 */
        li:nth-child(3) {
            /* //先让元素背向我们, */
            transform: rotateX(180deg)translateZ(150px);
        }

        /* 下面 */
        li:nth-child(4) {
            transform: rotateX(-90deg) translateZ(150px);
        }
        

        /* 按钮 */
        .btns {
            width: 100%;
            height: 60px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%) translateZ(150px);
        }

        .btns a {
            width: 40px;
            height: 60px;
            display: block;
            background-color: rgba(0,0,0,.5);
            color: #fff;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            float: left;
        }

        .btns a:last-child {
            float: right;
        }

  <script>
          
          //要实现的效果: 点击左右两侧的按钮,让立方体ul 旋转 沿着X轴旋转90deg

          //1. 分别获取左右两侧的按钮
          var rBtn = document.querySelector('.btns a:last-child');
          var lBtn = document.querySelector('.btns a:first-child');

          //2. 获取ul标签
          var  ul = document.querySelector('ul');

          //3. 点击按钮,让ul旋转(给ul设置旋转的样式)
        //设置一个变量,来实现左右点击键的翻转数
          var i = 0;
        //定义一个变量，告诉程序当前动画是否结束
          flag = true; //节流阀或者设置标志位

          rBtn.onclick = function() {
             if(flag){
                 //动画正在执行标记
                flag = false;
                i--;
              //旋转的角度是一个可变的角度
              ul.style.transform = 'rotateX('+i*90+'deg)';
              ul.style.transition = 'all 1s linear';
             }
          }

          lBtn.onclick = function () {
             if (flag) {
                 //动画正在执行标记
                 flag = false;
                    i++;
                ul.style.transform = 'rotateX('+i*90+'deg)';
                ul.style.transition = 'all 1s linear';
             }
          }
          
          //给 ul 注册这个事件
          //ontransitionend ： 当动画执行结束后就会执行这个事件
          ul.ontransitionend = function(){
              //当动画执行完成后，将falg改为true
            flag = true;
          }
      </script>

实现效果