浏览器渲染和CSS的transform属性

transform是CSS动画的基础，说到CSS动画,最好还是要考虑一下渲染性能，就不得不先说一下浏览器的渲染过程。

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一颗渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（把样式效果绘制上）
6. Compose合成（根据层叠关系展示画布） 当页面元素发生变化时，会根据情况的不同，有以下三种更新方式。

显然，第三种跳过layout和paint的渲染过程性能最好，这也是我们为什么选择transform属性的原因。关于属性触发何种浏览器渲染流程的信息，在csstriggers.com 中有相关介绍。

关于transform属性

常用的一般有三个功能，

translate():位移

scale():缩放

rotate():旋转

translate()位移功能

分为tanslateX()和translateY(),合并起来就是translate(x,y), x,y属性值的单位可以是px | % ，此处的百分比指元素自身的长或者宽。

其实还有translateZ()，给父元素用perspective属性添加一个视点,就可以实现Z轴缩放，有兴趣的朋友可以了解一下。

scale()缩放功能

同样的scale()也分为scaleX()和scaleY(),可以简写scale(x,y)，当scale()只有一个值时，代表y方向取了默认值（与x方向值相同），属性值为缩放倍数（-1,1)区间缩小，之外的范围放大，可以通过transform-origin:属性改变缩放中心。

.transformed {
  /* 等同于变换: scaleX(2) scaleY(2);*/
  transform: scale(2);
  background-color: blue;
}

和位移功能相似，旋转也有scale3D()功能

rotate()旋转功能

使元素旋转，默认旋转中心在元素的中心处，可以通过transform-origin:属性改变旋转中心。属性值为度数，单位是deg,正值代表顺时针，负值代表逆时针。