css3.0完成3d方块设计

作用原理

利用css3.0的新特性 transfrom下的 translateX() rotate()被设置景深完成3d效果。设置景深就是设置了一个视锥的效果，类似望远。并且translateX 和 position：absolute可以叠加。先把设置为transition：absolute。让所有的方块面堆在一起。然后用transform做一些平移(translate),旋转(rotate).等等。形成3d效果。

一个简单的方块。
html代码块如下。

        <div class="cube">
            <div class="out-front">前面</div>
            <div class="out-back">后面</div>
            <div class="out-left">左面</div>
            <div class="out-right">右面</div>
            <div class="out-top">上面</div>
            <div class="out-bottom">下面</div>
        </div>

css代码块如下：

<