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实现的，同志们肯试一下，

如果那里做的不好，请大家多多提出并指教 ， 谢谢！