立体导航翻转案例

 <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改为trueflag = true;}</script>