.box ul li:nth-child(1){transform:rotateX(90deg) translateZ(190px);}.box ul li:nth-child(2){transform:rotateX(-90deg) translateZ(190px);}.box ul li:nth-child(3){transform:translateZ(190px);}.box ul li:nth-child(4){transform:rotateX(180deg) translateZ(190px);}

.box {width: 560px;height: 380px;border: 1px solid #000;margin: 100px auto 0;/* 让这个盒子成为一个伸缩容器 一旦盒子成为了伸缩容器，里面所有的子元素都会自动成为项目 项目默认呈现水平排列 一旦水平排列就会超出box，所以，flex-shrink：1自动就会收缩每一个UL，最终的结果就是一个UL占的box的1/4*/display: flex;}.box ul {width: 560px;height: 380px;position: relative;transform-style:preserve-3d;transform:rotateX(0deg);transition:transform 1s;}.box ul li {/* 这里的LI设置成百分之百分宽高，为的是继承缩放后的UL的宽度 */width: 100%;height: 100%;position: absolute;left: 0;top: 0;/* 在这里添加overflow：hidden */overflow: hidden;}/* 给每一个UL添加延迟时间 */.box ul:nth-child(2){transition-delay: 0.2s;}.box ul:nth-child(3){transition-delay: 0.4s;}.box ul:nth-child(4){transition-delay: 0.6s;}/* 让每一个UL下面的图片都往左走 */.box ul:nth-child(2) img{margin-left: -140px;}.box ul:nth-child(3) img{margin-left: -280px;}.box ul:nth-child(4) img{margin-left: -420px;}

<script type="text/javascript">// 需求 ：点击按钮让UL进行旋转 每一次点击累加一个90的角度//（１）找对象var box = document.querySelector('.box');var _ul = box.querySelectorAll('ul');var btns = document.querySelectorAll('button');// （2）给右边的按钮绑定点击事件 每点击一次让Ul基于之前的角度在加上一个90var num = 0; // 模拟信号量// 设置一个flag变量var flag = true;// 整体绑定for(var i = 0; i < btns.length; i++){// 设置自定义属性btns[i].setAttribute('data-index', i);btns[i].addEventListener('click',function(){if(flag){// 关门flag = false;// 判断当前点击的是哪一个对象// 通过this去拿到当前的那个对象的data-indexvar index = this.dataset['index'];// 不能用全等 因为一个是字符串一个是数值型if(index == 1){num++;}else if(index == 0){num--;}console.log(num*90);// _ul.style.transform = 'rotateX('+num*90+'deg)';// 让所有的UL转起来for(var i = 0; i < _ul.length; i++){_ul[i].style.transform = 'rotateX('+num*90+'deg)';}}})}// 当用户暴力点击的时候，会出现过渡来不及的BUG 解决方案：函数节流 // 当最后一个UL的过渡执行完毕之后重新开门_ul[_ul.length - 1].addEventListener('transitionend',function(){console.log(1);// 开门flag = true;

　　　　})