front-end CSS3 Transform

序言

转换transform

transform包含3个部分：translate，rotate，scale，分别是移动，旋转，缩放。

2D

2D的坐标系如下，是和3D截然不同的。

translate

移动，类似定位，语法如下：
x，y就是在x轴，y轴上移动位置，

transform: translate(100px, 0);
等价于
transform: translateX(100px);

移动盒子的3种方法：

1. 定位
2. margin
3. translate

重点：

针对第二点，和使用margin负值不同，translate不会影响其它的盒子，也就是说它下面的盒子不会移动。

针对第三点，如果里面使用的是百分号，意味着是相对于自身的宽高来进行移动。举个栗子，这个盒子w100，h100，transform: translate(50%,50%);也就是说在x，y轴各自移动了50px。