CSS Transform 的执行顺序

CSS Transform 语句是有执行顺序的。

从效果上看，可以理解为 先传入 的 后执行；而从计算方式上看，其实是以 矩阵（matrix） 的方式去算的。

简单认识 matrix

matrix 方法有两种：

1. matrix() - 3x3 矩阵运算
2. matrix3d() - 4x4 矩阵运算

我们平时所用的 skew、scale、rotate…本质上都是用 matrix 实现的，只不过用 rotate 这种形式更容易让人上手

图片转自 理解 CSS3 transform 中的 Matrix（矩阵）

举个例子：

1
2

transform: rotate(30deg);
transform: matrix(0.866025, 0.500000, -0.500000, 0.866025, 0, 0);

以上两句 transform 是等价的，第二句翻译一下其实是：

1

transform: matrix(cos30°, sin30°, -sin30°, cos30°, 0, 0);

很明显，同样是旋转 30 度，rotate 用起来要方便很多。

Transform 执行顺序演示 Demo

展示两个小 Demo，可以在本地测试一下。

1. transform: rotate(45deg) scaleX(0.5)

1
2
3
4
5
6

.test_transform {
  width:100px;
  height:100px;
  background-color: #c685d9;
  transform: rotate(45deg) scaleX(0.5);
}

先执行 scaleX(0.5) 把正方形变成了长方形，再执行 rotateZ(45deg) 顺时针旋转 45 度，得到的效果是这样：

2. transform: scaleX(0.5) rotate(45deg)

1
2
3
4

.test_transform_2 {
  /* ... */
  transform: scaleX(0.5) rotate(45deg);
}

先执行了顺时针旋转 45 度，再压缩 X 轴变成一个菱形，得到的效果是这样：