CSS 2D transforms

.element {
  transform-origin: 0, 0
  transform: translateX(100px) scale(20);
}

transform 的值是 transform functions

transform-origin

transform-origin: x, y
Initial: 50% 50%

指定坐标原点。

x, y 可以是

• 长度
• 百分数，相对于 border-box。
• 关键字，left, right, top, bottom, center，计算值是百分数。

只有 x 时，y 为 center。

transfrom

translate

• translate(tx, ty)
• translateX(tx)
• translateY(tx)

rotate

• rotate(a)

scale

• scale(sx, sy)
• scaleX(sx)
• scaleY(sy)

跟其它 transforms 不一样， scale(sx, sy)

• 参数的默认值是 1，表示不缩放
• 若没有 sy，则 sy 等于 sx，即等比例缩放。

Skew

• skewX(ax)
• skewY(ay)

注意 skew() 已废弃。

Matrix functions

Matrix 将 transforms 合并为一个（矩阵计算）。

matrix() 有 6 个参数，指定一个 3x2 矩阵。

资料