提起transform属性就必须先认识浏览器的坐标轴 如下图
transform的有三大值 分别是 translate,rotation,scale。
属性中分别对应了X,Y,Z,与混合的3d接口,其中rotation会改变坐标轴的方向。
比如完成如下的一个效果
你可以先平移也可以先旋转 但比较简单的做法是 先统一居中 然后分别修改方向 最后朝着统一的前方移动
DOM的结构如下,先居中使用的是绝对定位的百分比算的是父类 而translate的百分算的是自身的特性来
在居中后修改方向再统一向前平移 保证唯一变量只是旋转的角度而不是平移的方向。