CSS3 3D效果 實現一個可旋轉的正方體

前提知識：

1.Transition（過渡）（W3C文檔http://www.w3.org/TR/css3-transitions/）

　　屬性：

• transition-property 要應用過渡的css屬性
• transition-duration 過渡發生的時長
• transition-timing-function 過渡過程速度變化的設置

可設置值:

linear(勻速）ease（緩慢開始，緩慢結束。默認） ease-in（緩慢開始） ease-out（緩慢結束） ease-in-out（緩慢開始，緩慢結束，但與ease速度不同）

• transition-delay 過渡何時開始
• transition 以上屬性簡寫

　　使用：

　　不同瀏覽器需要在屬性前加前綴：chrome、Safari 需要加 -webkit-，Firefox前綴-moz-，IE前綴-ms-，Opera前綴-o-

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #block{
            width:400px;
            height:400px;
            background-color: #69c;
            margin:0 auto;
            -webkit-transition: background-color 3s;
        }
        #block:hover{
            background-color: red;;
        }
    </style>
</head>
<body>
    <div id="block">
    </div>
</body>
</html>

 

2.Transform（轉換）（W3C文檔http://www.w3.org/TR/css3-3d-transforms/）

　　屬性：

　　perspective：建立3D場景，實現透視效果，值為物品與屏幕距離

　　perspective-origin：子元素在視圖中的位置，X和Y值表示（注意：perspective和perspective-origin都要在實現3D效果元素的父元素中設置）

　　transform-style：規定如何在 3D 空間中呈現被嵌套的元素（可設置為flat或preserve-3d）

　　transform-origin：旋轉中心

　　　　X軸可設置為：left | center | right

　　　　Y軸可設置為：top | center | bottom

　　　　Z軸設置在Z軸上的位置：length px

　　本例中用到的方法有translateX（px），translateY，translateZ，表示在XYZ軸上移動和rotateX（deg），rotateY，rotateZ繞XYZ軸旋轉。

一個類似日歷的實現：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #experiment{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;
            
            overflow: hidden; /*不能寫在#pagegroup，否則page顯示為2D效果*/
        }
        #pagegroup{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            -webkit-transform-style:preserve-3d;
            position: relative;
        }
        .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;
            color: white;
            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center; 

            position: absolute;
        }
        #page1,#page2,#page3,#page4,#page5{
            -webkit-transform-origin:top;
            -webkit-transition:-webkit-transform 1s linear;
        }
        #op{
            text-align: center;
            margin: 40px auto;
        }
    </style>
    <script type="text/javascript">
        
        var curIndex = 1;//當前頁
        
        function next(){
            if (curIndex==5)
                return;
            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform="rotateX(90deg)";
            curIndex++;
            var nextPage = document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform="rotateX(0deg)";//值表示旋轉到什么位置，而不是旋轉多少度
        }
        function prev(){
            if (curIndex==1) 
                return;                

            curIndex--;
            var prevPage = document.getElementById("page"+curIndex);
            prevPage.style.webkitTransform="rotateX(0deg)";
        }
    </script>
</head>
<body>
    <div id="experiment">
        <div id="pagegroup">
             <div class="page" id="page5">5</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page1">1</div>
        </div>
    </div>
    <div id="op">
            <a href="javascript:next()">next</a>&nbsp
            <a href="javascript:prev()">previous</a>
        </div>
</body>
</html>

完成上一個例子后，類似的可以完成一個可調節旋轉角度的正方體。正方體的樣式通過設置transform-origin和rotate的值實現。

<!DOCTYPE html>
<html>
<head>
    <title>myCube</title>
    <style type="text/css">
    
        #myCube{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;            
        }
        #cube{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;

            -webkit-transform-style:preserve-3d;
        }
        .face{
            position: absolute;
            width: 160px;
            height: 160px;
            padding: 20px;
            background-color: black;

            color: white;
            font-weight: bold;
            font-size: 160px;
            line-height: 160px;
            text-align: center;

            -webkit-transition:-webkit-transform 1s linear;
        }
        #face1{
        }
        #face2{
            -webkit-transform-origin:right;
            -webkit-transform:rotateY(-90deg);
        }
        #face3{
            -webkit-transform-origin:left;
            -webkit-transform:rotateY(90deg);
        }
        #face4{
            -webkit-transform-origin:top;
            -webkit-transform:rotateX(-90deg);
        }
        #face5{
            -webkit-transform-origin:bottom;
            -webkit-transform:rotateX(90deg);
        }
        #face6{
            -webkit-transform:translateZ(-160px);
        }
        #op{
            margin: 0 auto;
            width: 800px;
            font-weight: bold;
            font-size: 16px;
        }
        #op .range-control{width: 720px;}
    </style>
    <script type="text/javascript">
        function rotate(){
            var x = document.getElementById("rotatex").value;
            var y = document.getElementById("rotatey").value;
            var z = document.getElementById("rotatez").value;

            document.getElementById("cube").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
            document.getElementById("degx").innerText = x;
            document.getElementById("degy").innerText = y;
            document.getElementById("degz").innerText = z;
        }
    </script>
</head>
<body>
    <div id="myCube">
        <div id="cube">
            <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
        </div>
    </div>
    <div id="op">
        <p>rotateX:<span id="degx">0</span>deg</p>
        <input type="range" id="rotatex" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
        <p>rotateY:<span id="degy">0</span>deg</p>
        <input type="range" id="rotatey" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
        <p>rotateZ:<span id="degz">0</span>deg</p>
        <input type="range" id="rotatez" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
    </div>
</body>
</html>

參考教程：http://www.imooc.com/learn/77