css3製作正方體

今天學習transform的時候突然奇想，想寫一個正方體，然後我就跟着我的想法，寫咯一個，該正方體是全部用的html5+css3實現的，只要用transform 裏面的rotate（旋轉）、translate（位移）等，多的就不說咯，具體的看代碼，

html代碼如下：

<div class="bigbox">
    <div class="wrap">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
</div>

css代碼：

*{margin:0; padding:0;}
    body{ background: #bebebe; }
    .bigbox{
        -webkit-transform-style:preserve-3d; 
                transform-style:preserve-3d; 
    }
    .wrap{
        width: 500px; height: 500px;opacity: 0.8;
        position: relative; margin:100px auto;
         
    }
    .box{ width: 200px; height: 200px; position: absolute;  
        font-size: 50px; color: #fff;text-align: center; line-height: 200px; opacity: .8;
       
    }
    .box1{ background: blue;
        -webkit-transform:translateX(80px) translateY(100px);
        -moz-transform:translateX(80px) translateY(100px);
        transform:translateX(80px) translateY(100px);
    }
    .box2{ background: #f483a8;
        -webkit-transform:translateX(192px) translateY(16px);
        -moz-transform:translateX(192px) translateY(16px);
        transform:translateX(192px) translateY(16px);
    }
    .box3{ background: red;  left:80px; top:-42px; 
        -webkit-transform:rotateX(65deg) skewX(-29deg) translateX(56px);
        -moz-transform:rotateX(65deg) skewX(-29deg) translateX(56px);
        transform:rotateX(65deg) skewX(-29deg) translateX(56px);
    }
    .box4{ background: red;  left:80px; top:158px; 
        -webkit-transform:rotateX(65deg) skewX(-29deg) translateX(56px);
        -moz-transform:rotateX(65deg) skewX(-29deg) translateX(56px);
        transform:rotateX(65deg) skewX(-29deg) translateX(56px);
    }
    .box5{ background: #ff05bb;
        -webkit-transform:translateX(36px) translateY(58px) skewY(-37deg) scaleX(0.56);
        -moz-transform:translateX(36px) translateY(58px) skewY(-37deg) scaleX(0.56);
        transform:translateX(36px) translateY(58px) skewY(-37deg) scaleX(0.56);
    }
    .box6{ background: #12f7f4;
        -webkit-transform:translateX(236px) translateY(58px) skewY(-37deg) scaleX(0.56);
        -moz-transform:translateX(236px) translateY(58px) skewY(-37deg) scaleX(0.56);
        transform:translateX(236px) translateY(58px) skewY(-37deg) scaleX(0.56);
    }

效果圖如下：

這裏還可以製作旋轉位移等動畫，現在我就做到這裏，其實也還可以用其他的css3實現的，同志們肯試一下，

如果那裏做的不好，請大家多多提出並指教 ， 謝謝！