作用原理
利用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代码块如下:
<