CSS3 transform属性

提起transform属性就必须先认识浏览器的坐标轴 如下图

transform的有三大值 分别是 translate，rotation，scale。

属性中分别对应了X,Y,Z,与混合的3d接口，其中rotation会改变坐标轴的方向。

比如完成如下的一个效果

你可以先平移也可以先旋转  但比较简单的做法是  先统一居中  然后分别修改方向  最后朝着统一的前方移动

DOM的结构如下，先居中使用的是绝对定位的百分比算的是父类  而translate的百分算的是自身的特性来

在居中后修改方向再统一向前平移  保证唯一变量只是旋转的角度而不是平移的方向。