css3 中 transform 的实例讲解

受基友actanble的邀请，贡献一篇博客 @actanble

这种效果的3D元素普遍，网上一搜就是一堆，但是我感觉相应的讲解似乎不是很简洁，想了想，这里说说这个也是有点必要的。

transform，变化，css中transform可以实现平面的变化，像缩放，位移等等，也可以实现3D效果，操作方法相似，只是略微增加了一些条件。(和动画很像，但不是动画，画面的移动变换是通过transition去实现的)

本篇博客阅读门槛较低 (我也比较菜) ，大抵了解 H5 css3即可，不涉及JS。

通过阅读本篇博客，你能了解到， transition，transform中的rotate旋转，roingin原点,perspective景深，preserve-3d保存3D等知识点。

开始。

HTML结构，GIF图中，每一个带有数字的面，都是一个单独元素，里面的小盒子有6个元素，外面的大盒子有6个元素，统一设置元素形式为div。

小盒子中的6个div是一个整体，故用一个div包在一起，随便起个名字id='box1'

大盒子中的6个div看似是小盒子的父级，但是其实并不是，因为用的是一个原点，只是位移的距离不同而已，也是用一个div包在一起，随便起个名字id='box2'

再把大小盒子一起打包用包起来，id=’wrap‘

再用一个div把 wrap 包起来（为什么又包一层....因为perspective景深的原因，需要设置给运动元素的父级，当然你也可以设置给body），id = ’frame‘

结构在此

写到这里，页面显示的元素还都是普通的，甚至是没有布局的，从上到下排列的块元素。这里我们就要开始写CSS样式了。

首先我们对最外围的