CSS3 transform的简单理解

1. 在使用transform的时候，我们需要知道以下一些术语：

• local coordinate system：
  local坐标系的原点在reference box的左上方，reference box是由transform-box属性定义的。
• transform-box：
  可以指定为content-box, border-box, view-box等，默认值为view-box。
• transform-origin：
  定义transform操作的基点，取值可以是top, bottom, center等key value，也可以是percentage。
• transform-matrix：
  定义了一个坐标系到另一个坐标系的转换，这是由transform-origin, transform property两个一起定义的。

The transformation matrix is computed from the transform and transform-origin properties as follows: 1. Start with the identity matrix. 2. Translate by the computed X and Y of transform-origin 3. Multiply by each of the transform functions in transform property from left to right. 4. Translate by the negated computed X and Y values of transform-origin.

这个过程看起来不是很好理解。可以通过例子来理解

div {
transform-origin: 0 0;
transform: translate(-10px,-20px) scale(2) rotate(-45deg);
}

transformation matrix

因为origin定义的是0，所以可以忽略，因此从左到右分别是translate, scale, rotate三个矩阵的累计相乘。

自己测试：

<div>hello</div>
<style>
div.hover{
transform-origin: 50% 50% //box中心为变换基点
transform: translate(50px, 50px) rotate(90deg) scale(1.5);
div{
transition: all 1s ease;
}
</style>

结果：

transform.gif

transformation matrix的一些解释可以看这篇文章：

“css3 transform matrix 深入理解”

2. transform-origin

直观上来看，不同的transform-origin主要影响rotate, scale和translate对于不同的变换基点来说，肉眼效果都是一样的。