立体导航翻转案例
<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>//要實現(xiàn)的效果: 點擊左右兩側的按鈕,讓立方體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設置旋轉的樣式)//設置一個變量,來實現(xiàn)左右點擊鍵的翻轉數(shù)var i = 0;//定義一個變量，告訴程序當前動畫是否結束flag = true; //節(jié)流閥或者設置標志位rBtn.onclick = function() {if(flag){//動畫正在執(zhí)行標記flag = false;i--;//旋轉的角度是一個可變的角度ul.style.transform = 'rotateX('+i*90+'deg)';ul.style.transition = 'all 1s linear';}}lBtn.onclick = function () {if (flag) {//動畫正在執(zhí)行標記flag = false;i++;ul.style.transform = 'rotateX('+i*90+'deg)';ul.style.transition = 'all 1s linear';}}//給 ul 注冊這個事件//ontransitionend ： 當動畫執(zhí)行結束后就會執(zhí)行這個事件ul.ontransitionend = function(){//當動畫執(zhí)行完成后，將falg改為trueflag = true;}</script>
實現(xiàn)效果
總結
