问题导入
transform: translate(30px, 0) rotate(35deg);和 transform: rotate(35deg) translate(30px, 0);的效果是否一样呢？
答案是效果不一样。【仔细看，仔细看，仔细看】
是什么
css3 中的transform属性可以让我们旋转、缩放、skew或者偏移一个元素。
本文的展示效果都将基于下面的图形进行变换
二维变换
- 3 * 3的变换矩阵
- 对二维向量进行转换
其中x1，y1为经过Matrix转换后的向量。由公式可知，Matrix中e，f主要用于设置元素在X和Y轴上的平移。a，d主要用于设置元素在X轴和Y轴的缩放，abcd用于设置元素在XY平面的旋转。rotate、translate、screw等都可以直接设置Matrix来达到相同的效果。
transform的值
transform的值比较多，接下来我们看看那常用的几个属性值
translate
- 设置元素在X轴或者Y轴上的位移变换
- transform-orgin变换原点默认 (50%, 50%, 0)（x, y, z）相对于元素自身
transform: translate(20px 10px);
// 等效
transform: Matrix(1, 0, 0, 1, 20, 10);
scale
- 设置元素在X轴或Y轴上的缩放。
// 元素在X轴上拉伸一倍（现在width为变换前*2， 在Y轴上缩小一倍height * 0.5）
transform: scale(2, 0.5);
// 等效于
transform: Matrix(2, 0, 0, 0.5, 0, 0);
rotate
- 二维空间中，rotate即围绕垂直于屏幕向量旋转，等同于rotateZ
transform: rotate(30deg);
// 等效于
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
transform-origin
transform变换远点，默认(50%, 50%, 0)【个人认为这是一个非常重要的】
transform: rotate(30deg);
transform-origin: 'left top'
坐标的XYZ是根据原始图的生成的，不会随着transform的改变儿改变
transform各个变换的执行顺序
解答第一部分提出的问题
transform: translateX(100px) rotate(90deg);
// 与
transform：rotate(90deg) translateX(100px);
