css案例（二）

-webkit-perspective：景深（像素來表示）

-webkit-transform-style：preserve-3d；（創建一個3D空間）

-webkit-transform-origin：景深基點

-webkit-transform：translateZ（25deg）；（3D空間中的Z軸）

正方體實例：

*{margin:0;padding:0;list-style: none;}
.waper{width: 100px;height: 100px;margin: 100px auto;border: 1px solid #000;-webkit-perspective:300px;padding: 100px;-webkit-perspective-origin:center center;}
.box{width:100px;height:100px;position: relative;-webkit-transform-style:preserve-3d;-webkit-transition:2s;}
.box div{width: 100px;height: 100px;position: absolute;font-size: 30px;line-height: 100px;text-align: center;color: #fff;}
.box div:nth-of-type(1){top:-100px;left: 0;-webkit-transform-origin:bottom;background: red;-webkit-transform:rotateX(90deg);}
.box div:nth-of-type(2){top:0;left: -100px;-webkit-transform-origin:right;background: yellow;-webkit-transform:rotateY(-90deg);}
.box div:nth-of-type(3){top:0;left: 0;-webkit-transform-origin:bottom;background: pink;}
.box div:nth-of-type(4){top:0;left: 100px;-webkit-transform-origin:left;background: green;-webkit-transform:rotateY(90deg);}
.box div:nth-of-type(5){top:100px;left: 0;-webkit-transform-origin:top;background: blue;-webkit-transform:rotateX(-90deg);}
.box div:nth-of-type(6){top:0;left: 0;background: black;-webkit-transform:translateZ(-100px) rotateX(180deg);}
.waper:hover .box{-webkit-transform:rotateX(180deg);}

<div class="waper">
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>

3D輪播圖實例：

<style id="css">
*{margin:0;padding:0;list-style: none;}
.waper{width:800px;margin:100px auto 0;}
#picList{width:800px;height: 360px;-webkit-perspective:800px;}
#picList li{width: 25px;height: 360px;position: relative;-webkit-transform-style:preserve-3d;-webkit-transform-origin:center center -180px;float: left;transition:1s;}
#picList li a{width: 100%;height:100%;position: absolute;left: 0;top:0;}
#picList li a:nth-of-type(1){background: url(5img/1.jpg) no-repeat;}
#picList li a:nth-of-type(2){background: url(5img/2.jpg) no-repeat;top:-360px;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);}
#picList li a:nth-of-type(3){background: url(5img/3.jpg) no-repeat;-webkit-transform:translateZ(-360px) rotateX(180deg);}
#picList li a:nth-of-type(4){background: url(5img/4.jpg) no-repeat;-webkit-transform-origin:top;top:360px;-webkit-transform:rotateX(-90deg);}
#picList li span{position: absolute;width: 360px;height: 360px;background: #333;}
#picList li span:nth-of-type(1){-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);left: 0;}
 #picList li span:nth-of-type(2){-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg);right: 0;}
#btnList{float: right;padding:20px 0;}
#btnList li{width: 20px;height: 20px;background:#000;color: #fff;border-radius: 50%;
    font:14px/20px Arial;float: left;text-align: center;margin-left: 10px;}
#btnList li.active{background: orange;}
</style>

window.onload = function(){
    var oPicList = document.getElementById('picList');
    var aBtn = document.getElementById('btnList').getElementsByTagName('li');
    var oCss = document.getElementById("css");
    var sLi = "";
    var iLiw = 25;	// 設置每個li的寬度
    var iCss = "";
    var iZindex = 0;	// 設計層級
    var iLength = oPicList.clientWidth/iLiw;
    for(var i=0;i<iLength;i++){
        i>iLength/2 ? iZindex-- : iZindex++;	// 當i>二分之一li長度時，層級逐減，反之逐增
        sLi += ` <li>				// 設置每個li，使其變成一個立方體
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <span></span>
                    <span></span>
                </li>`
        iCss += '#picList li:nth-of-type('+ (i+1) +') a{background-position:-'+ i*iLiw + 'px 0}';   // 樣式的疊加
        iCss += '#picList li:nth-of-type('+ (i+1) +'){z-index:'+ iZindex +'}';		// 設置層級
    }
    oPicList.innerHTML = sLi;
    oCss.innerHTML += iCss;
    var aLi = oPicList.getElementsByTagName('li');	// 獲取所有的li
    for(var i=0;i<aBtn.length;i++){			// 循環按鈕
        aBtn[i].index = i;				// 獲取當前按鈕的索引
        aBtn[i].onclick = function(){			// 給按鈕添加點擊事件
            for(var j=0;j<aLi.length;j++){		// 循環li
                aLi[j].style.transition = "0.5s "+ j*30 +"ms";		// 設置每個li出現時的時延
                aLi[j].style.WebkitTransform = "rotateX(-" + this.index*90 + "deg)";	// 設置旋轉度數
            }
            for(var m=0;m<aBtn.length;m++){		// 清空每個按鈕的class
                aBtn[m].className = "";
            }
            this.className = "active";			// 給當前點擊的按鈕添加class
        }
    }
}

<div class="waper">
    <ul id="picList">
    </ul>
    <ol id="btnList">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>

animation：執行時間 延時 動畫名稱 執行次數

案例：鼠標移入div時，div停止運動，移出後繼續運動（注意要寫內核前綴）

@-webkit-keyframes move{  
    0%{      
        top:0;left:0; 
    }
    25%{
        top:0;left: 200px;
    }
    50%{
        top:200px;left: 200px;  
    }
    75%{
       top:200px;left: 0;
    }
    100%{
        top:0;left: 0;
    } 
}
.box{width: 300px;height: 300px;border:2px solid #000;position: relative;}
.box div{width:100px;height:100px;background: red;position:absolute;top:0;left:0;-webkit-animation:5s move ease infinite}
.box:hover div{-webkit-animation-play-state:paused;}   	// 播放停止

<div class="box">
    <div></div>
</div>

翻轉輪播圖案例：

@-webkit-keyframes show{  
    0%{      
        -webkit-transform:rotateX(180deg);opacity: 0;
    }
    70%{
        -webkit-transform:rotateX(-8deg);opacity: 1;
    }
    75%{
        -webkit-transform:rotateX(5deg);opacity: 1;
    }
    80%{
        -webkit-transform:rotateX(-6deg);opacity: 1;
    }
    85%{
        -webkit-transform:rotateX(4deg);opacity: 1;
    }
    90%{
        -webkit-transform:rotateX(-5deg);opacity: 1;
    }
    92%{
        -webkit-transform:rotateX(2deg);opacity: 1;
    }
    94%{
        -webkit-transform:rotateX(-3deg);opacity: 1;
    }
    95%{
        -webkit-transform:rotateX(1deg);opacity: 1;
    }
    100%{
        -webkit-transform:rotateX(0deg);opacity: 1;
    } 
}
@-webkit-keyframes hidden{  
    0%{      
        -webkit-transform:rotateX(0deg);opacity: 1;
    }
    100%{
        -webkit-transform:rotateX(-180deg);opacity: 0;
    } 
}
.box{width: 500px;height: 225px;position: relative;margin:100px auto 0;-webkit-perspective:800px;-webkit-transform-style:preserve-3d;}
.box span{position: absolute;top:80px;width: 40px;height: 40px;border-radius: 50%;text-align: center;line-height: 40px;font-size: 35px;background: #e6e5e5;color: #fff;}
.box span:nth-of-type(1){left: -100px;}
.box span:nth-of-type(2){right: -100px;}
.box img{width: 500px;height: 225px;position: absolute;left: 0;top: 0;-webkit-transform-origin:bottom;-webkit-transform:rotateX(180deg);opacity: 0;}
.box .show{-webkit-transform:rotateX(0deg);opacity: 1;-webkit-animation:0.9s show;}
.box .hidden{-webkit-transform:rotateX(-180deg);opacity: 0;-webkit-animation:0.6s hidden;}

window.onload = function(){
    var oBox = document.getElementById('box');
    var aSpan = oBox.getElementsByTagName('span');
    var aImg = oBox.getElementsByTagName('img');
    var iNow = 0;	
    aSpan[1].onclick = function(){
        aImg[iNow].className = "hidden";
        iNow++;
        if(iNow>=aImg.length){
            iNow = 0;
        }
        aImg[iNow].className = "show";
    }
    aSpan[0].onclick = function(){
        aImg[iNow].className = "hidden";
        iNow--;
        if(iNow<=0){
            iNow = aImg.length-1;
        }
        aImg[iNow].className = "show";
    }
 }

<div class="box" id="box">
    <span><</span>
    <span>></span>
    <img src="7img/1.jpg" class="show">
    <img src="7img/2.jpg">
    <img src="7img/3.jpg">
    <img src="7img/4.jpg">
</div>

摺紙導航案例：（注意：摺紙導航的佈局很重要，佈局不好，寫的時候就會很麻煩）

@-webkit-keyframes show{
    0%{ -webkit-transform:rotateX(-120deg);}
    25%{ -webkit-transform:rotateX(30deg);}
    50%{ -webkit-transform:rotateX(-15deg);}
    75%{ -webkit-transform:rotateX(8deg);}
    100%{ -webkit-transform:rotateX(0deg);}
}
@-webkit-keyframes hiden{
    0%{ -webkit-transform:rotateX(0deg);}
    100%{ -webkit-transform:rotateX(-120deg);}
}
.box{width:180px;margin:30px auto;position:relative;-webkit-perspective:800px;}
.box h3{width:100%;height:35px;background: orange;color: #fff;font:16px/35px '微軟雅黑';text-align: center;position: relative;z-index: 100;cursor: pointer;}
.box div{position: absolute;top:27px;width: 100%;left: 0;/*-webkit-transform-style:;*/-webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}
.box span{display: block;height: 25px;background: #62e462;font:12px/25px '微軟雅黑';text-align: center;color: #fff;box-shadow:inset 0 0 0 20px rgba(0,0,0,0.8); transition:1s;}
.box>div{top:35px;}
.box .show{-webkit-animation:1.2s show ease-in;-webkit-transform:rotateX(0deg);}
.box .show>span{box-shadow:inset 0 0 0 20px rgba(0,0,0,0);}
.box .hiden{-webkit-animation:0.5s hiden;-webkit-transform:rotateX(-120deg);}

window.onload = function(){
    var oBtn = document.getElementById('btn');
    var aDiv = document.getElementById('box').getElementsByTagName('div');
    var timer = null;
    var iNow = 0;
    var bOn = true;
    oBtn.onclick = function(){
        if(timer){		// 如果定時器開啓了，就返回
            return false;
        }
        if(bOn){
            iNow = 0;		
            timer = setInterval(showFn,180);
         }else{
            iNow = aDiv.length-1;
            timer = setInterval(hidenFn,120);
         }
        bOn = !bOn;	// 每次執行完，bOn取反
    }
    function showFn(){
        aDiv[iNow].className = "show";
        iNow++;
        if(iNow>=aDiv.length){
            clearInterval(timer);
            timer = null;
        }
    }
     function hidenFn(){
         console.log(iNow);
        aDiv[iNow].className = "hiden";
        iNow--;
        if(iNow<0){
            clearInterval(timer);
            timer = null;
        }
    }
}

<div class="box" id="box">
    <h3 id="btn">導航指南</h3>
    <div>
        <span>導航指南一</span>
        <div>
            <span>導航指南二</span>
            <div>
                <span>導航指南三</span>
                <div>
                    <span>導航指南四</span>
                    <div>
                        <span>導航指南五</span>
                        <div>
                            <span>導航指南六</span>
                            <div>
                                <span>導航指南七</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>