聊聊用CSS3來玩立方體

　　聲明：本文為原創文章，如需轉載，請注明來源WAxes，謝謝！

　　雖然現在很多瀏覽器都還不支持css3的3D轉換，不過估計也已經有很多人都有玩css3的3D了。。。。。。所以我這篇也就相當於水一下了，哈哈。

　　用css3寫3D立方體用到的屬性不多，就那么幾個：perspective，transform-style，以及transform。目前來說能完美支持3D的好像就只有chrome以及safari，也就是webkit引擎。所以本文的css3代碼都只加了webkit前綴，因為產生3D的關鍵屬性perspective其他瀏覽器都不支持，所以其他瀏覽器是應該是看不了3D的，所以看本文的例子請用chrome或者safari來看哦。

　　好吧，廢話不多說，進入主題：先上DEMO：  鏈接：3Dhouses   （不要吐槽圖片，因為找不到合適的素材，樓主只能自己畫了，不過畫是次要的哈，別介意）

　　【html的布局】

　　先說html該如何來布局：

<div class="cube">
        <div class="ant">
            <div class="face face-right"><img src="image/face-right.png" alt=""></div>
            <div class="face face-left"><img src="image/face-left.png" alt=""></div>
            <div class="face face-in"><img src="image/face-in.png" alt=""></div>
            <div class="face face-out"><img src="image/face-out.png" alt=""></div>
            <div class="face face-bottom"><img src="image/face-bottom.png" alt=""></div>
            <div class="face face-top"><img src="image/face-bottom.png" alt=""></div>

            <div class="face nohidden face-right"></div>
            <div class="face nohidden face-left"></div>
            <div class="face nohidden face-in"></div>
            <div class="face nohidden face-out"></div>

            <div class="house tv"><img src="image/tv.png" alt=""></div>
            <div class="house bed"><img src="image/bed.png" alt=""></div>
        </div>
    </div>

　　一個立方體總共有六個面，所以，我們首先需要六個div：上面的faceout這些就是六個面。下面的nohidden類的div是我為了產生邊，提升立體感加上去的，因為上面的那幾個面有加backface-visibility: hidden屬性，所以當div背對我們的時候是看不見的（當然，連border也是看不見咯，具體你可以自己測試一下），加了下面那些div就是為了營造更強的空間感吧，樓主表達能力有限，如果不是很懂，待會我會把所有代碼貼出，可以拷貝回去自己測試一下，還是挺好玩的。

　　好吧，回歸主題，立方體是六個面，同時他還需要一個外殼，如果你想讓整個立方體動起來，就需要一個外殼，讓六個面的位置定好后，然后讓那個外殼動起來，里面的六個面位置也就跟着變了，這其中涉及一個很關鍵的屬性：transform-style，這個屬性是使被轉換的子元素保留其 3D 轉換，意思就是如果沒有這個屬性，當你的外殼轉動起來的時候，內部的六個面的3D效果就會消失了，所以一定要在外殼上加上:transform-style: preserve-3d。

　　除了外殼外，還需要一個3D區域，也就是上面的cube類div。在cube里加上perspective屬性就可以讓cube里面產生3D效果，上面也有說過perspective是設置元素被查看位置的視圖，他能讓里面的元素產生透視效果，也就是3D。這個屬性如今只有webkit引擎支持。。

　　【CSS】

　　html寫好后，就開始寫css：

.cube{
            width: 800px;
            height: 400px;
            -webkit-perspective: 1000px;
            margin:200px auto 0 auto;
        }

        .ant{
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            -webkit-animation:xuanzhuan 10s infinite linear;
        }

        .face{
            width: 100%;
            height: 100%;
            position: absolute;
            border:1px solid;
            -webkit-backface-visibility: hidden;
            /*background-color: #FFF;*/
            overflow: hidden;
            z-index: 10;
        }
        
        .nohidden{
            -webkit-backface-visibility: visible;
        }
        .face img{
            width: 100%;
            height: 100%;

        }

        .face-right{
            -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);
        }
        .face-left{
            -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);
        }
        .face-in{
            -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);
        }
        .face-out{
            -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);
        }
        .face-bottom{
            height: 800px;
            -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);
        }
        .face-top{
            height: 800px;
            -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);
        }
        
        .house{
            position: absolute;
            height: 200px;
            z-index: 100;
        }
        .tv{
            -webkit-transform: translate3d(200px , 230px , 300px) rotateY(180deg);
        }
        .bed{
            height: 100px;
            -webkit-transform: translate3d(550px , 310px , 0px) rotateY(-90deg);
        }

        .house img{
            height: 100%;
        }

        @-webkit-keyframes xuanzhuan{
            from{
                -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            }
            to{
                -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);
            }
        }

　　perspective和transform-style都說過了，就不說了，說一下六個面的布置，就用到了transform方法了，其實也很容易理解：就是通過transform里的translate3d以及rotate旋轉來調整六個面的位置和角度，同時提醒一下，寫transform時，先寫translate再寫rotate和先寫rotate再寫translate出來的效果是不一樣的，雖然兩個都可以做出3D效果，但是參數是不一樣的，前者可能更容易理解。先平移再旋轉。而后者是旋轉了之后，不能用xy平移，而是通過z軸才行了。

　　當CSS也寫好后，就可以加個動畫效果看看了，這個就不多說了，就是通過animation很容易做的。

　　下面貼出完整代碼

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <style>
        body{
            margin:0;
            padding:0;
        }
        .cube{
            width: 800px;
            height: 400px;
            -webkit-perspective: 1000px;
            margin:200px auto 0 auto;
        }

        .ant{
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            -webkit-animation:xuanzhuan 10s infinite linear;
        }

        .face{
            width: 100%;
            height: 100%;
            position: absolute;
            border:1px solid;
            -webkit-backface-visibility: hidden;
            /*background-color: #FFF;*/
            overflow: hidden;
            z-index: 10;
        }
        
        .nohidden{
            -webkit-backface-visibility: visible;
        }
        .face img{
            width: 100%;
            height: 100%;

        }

        .face-right{
            -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);
        }
        .face-left{
            -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);
        }
        .face-in{
            -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);
        }
        .face-out{
            -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);
        }
        .face-bottom{
            height: 800px;
            -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);
        }
        .face-top{
            height: 800px;
            -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);
        }
        
        .house{
            position: absolute;
            height: 200px;
            z-index: 100;
        }
        .tv{
            -webkit-transform: translate3d(200px , 230px , 300px) rotateY(180deg);
        }
        .bed{
            height: 100px;
            -webkit-transform: translate3d(550px , 310px , 0px) rotateY(-90deg);
        }

        .house img{
            height: 100%;
        }

        @-webkit-keyframes xuanzhuan{
            from{
                -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            }
            to{
                -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);
            }
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="cube">
        <div class="ant">
            <div class="face face-right"><img src="image/face-right.png" alt=""></div>
            <div class="face face-left"><img src="image/face-left.png" alt=""></div>
            <div class="face face-in"><img src="image/face-in.png" alt=""></div>
            <div class="face face-out"><img src="image/face-out.png" alt=""></div>
            <div class="face face-bottom"><img src="image/face-bottom.png" alt=""></div>
            <div class="face face-top"><img src="image/face-bottom.png" alt=""></div>

            <div class="face nohidden face-right"></div>
            <div class="face nohidden face-left"></div>
            <div class="face nohidden face-in"></div>
            <div class="face nohidden face-out"></div>

            <div class="house tv"><img src="image/tv.png" alt=""></div>
            <div class="house bed"><img src="image/bed.png" alt=""></div>
        </div>
    </div>
</body>
</html>

　　如果能做出上面那個立方體的時候，網上那些看似很炫的css3的3D輪播圖也就很容易做出來了 3D輪播圖

 

　　這個的原理就不解釋了，自己看代碼吧，都一個樣的，每一塊就是一個3D模型，我這個只是做出了效果，沒去做輪播了，做輪播也很容易，用js控制更換圖片的src就行了。對了，還有一點就是注意一下每個塊的排序，我之前以為用z-index可以，但是好像不行，就只能通過排序來調整各個塊的層級關系了。

　　下面貼出3D輪播的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>3D輪播圖</title>
    <style>
        body{margin:0;padding:0;}
        .cube{
            width: 800px;
            height: 600px;
            -webkit-perspective: 1000px;
            margin:150px auto 0 auto;
            position: relative;
        }
        .ant{
            width: 200px;
            height: 100%;
            display: block;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0,0,-400px);
            position:absolute;
        }

        .ant-1{left: 0px;}
        .ant-2{left: 200px;}
        .ant-3{left: 400px;}
        .ant-4{left: 600px;}
        .ant-1 img{left: 0px;}
        .ant-2 img{left: -200px;}
        .ant-3 img{left: -400px;}
        .ant-4 img{left: -600px;}

        .face{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            border:1px solid;
        }
        .face img{
            display: block;
            width: 800px;
            height: 100%;
            position: absolute;
        }
        .face-top{
            -webkit-transform: translate3d(0,-300px,0px) rotateX(90deg);
        }
        .face-bottom{
            -webkit-transform: translate3d(0,300px,0px) rotateX(-90deg);
        }
        .face-in{
            -webkit-transform: translate3d(0,0,-300px) rotateX(180deg);
        }
        .face-out{
            -webkit-transform: translate3d(0,0,300px) rotateX(0deg);
        }
        .face-left{
            background-color: #999;
            width: 600px;
            -webkit-transform: translate3d(-300px,0,0px) rotateY(90deg);
        }
        .face-right{
            background-color: #999;
            width: 600px;
            -webkit-transform: translate3d(-100px,0,0px) rotateY(-90deg);
        }
    
        .Animate{
            -webkit-animation:xuanzhuan 10s infinite linear;
        }

        @-webkit-keyframes xuanzhuan{
            0%{
                -webkit-transform: translate3d(0,0,-400px) rotateX(0deg);
            }
            50%{
                -webkit-transform: translate3d(0,0,-400px) rotateX(-360deg);
            }
            100%{
                -webkit-transform: translate3d(0,0,-400px) rotateX(0deg);
            }
        }
    </style>
    <script>
        var PIC_NUM = 5; //圖片分成的塊數
        window.onload = function(){
            var index = 1;
            document.querySelector(".ant-"+index).className += " Animate";
            setTimeout(function(){
                index++;
                document.querySelector(".ant-"+index).className += " Animate";
                setTimeout(function(){
                    index++;
                    document.querySelector(".ant-"+index).className += " Animate";
                    setTimeout(function(){
                        index++;
                        document.querySelector(".ant-"+index).className += " Animate";
                    },600)
                },600)
            } , 600);
        }
    </script>
</head>
<body>
    <ul class="cube">
        <li class="ant ant-1">
            <div class="face face-top">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-bottom">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-left"></div>
            <div class="face face-right"></div>
            <div class="face face-in">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-out">
                <img src="image/face-in.png" alt="" />
            </div>
        </li>
        <li class="ant ant-2">
            <div class="face face-top">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-bottom">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-left"></div>
            <div class="face face-right"></div>
            <div class="face face-in">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-out">
                <img src="image/face-in.png" alt="" />
            </div>
        </li>
        <li class="ant ant-4">
            <div class="face face-top">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-bottom">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-left"></div>
            <div class="face face-right"></div>
            <div class="face face-in">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-out">
                <img src="image/face-in.png" alt="" />
            </div>
        </li>
        <li class="ant ant-3">
            <div class="face face-top">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-bottom">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-left"></div>
            <div class="face face-right"></div>
            <div class="face face-in">
                <img src="image/face-in.png" alt="" />
            </div>
            <div class="face face-out">
                <img src="image/face-in.png" alt="" />
            </div>
        </li>
    </ul>
</body>
</html>

　　沒有用js封裝成輪播圖模塊也是為了讓代碼更清晰易懂吧。。。。水完收工=。=|||