共计 948 个字符，预计需要花费 3 分钟才能阅读完成。
什么是变化样式
transform 属性应用于元素的 2D 或 3D 转换。
这个属性允许你将元素旋转（rotate），缩放（scale），移动 (translate)，倾斜 (skew)、位移（translate）、transform-origin 变化原点等
属性值：
transform：rotate（角度值）；
/* 设置元素绕着中心的旋转效果 */
角度值为正，元素顺时针旋转；角度值为负元素，逆时针旋转
transform 的复合样式写法
变化样式可以使用复合写法，如
transform: scale(*) translate（*, *）skew(*) rotate(*);
变化样式内多个样式值顺序的不同会导致完全不一样的结果
transform:translateX(300px) translateY(200px) rotate(45deg);
和
transform:rotate(45deg) translateX(300px) translateY(200px) ;
效果是不一样的：
效果一：
效果二：
动画性能优化
前端动画实现的方法基本分为两大类:
•一种是利用 JavaScript 在 canvas 画布进行动画绘制
•一种是利用 JavaScript 或 css 来控制元素的位置属性值的变化来实现动画效果
每个步骤的详细处理内容为：
1.change（通过 JavaScript 或 CSS 改变某个元素的位置属性值）
2.Style（计算样式）：浏览器确定每个 DOM 元素最终应用哪些 CSS 规则。
3.Layout（布局）：浏览器计算每个 DOM 元素在最终屏幕上显示的大小和位置。并且整个页面上所有的元素位置都是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow（重排）。
4.Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。最典型就是 background 和绝对定位中不同 Z -index 值的元素。
5.Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。比如讲元素的内容层放在 background 层之上，同一坐标系下的不同 z -index 值的元素
浏览器性能消耗查询
chrome 开发者工具里的一个模块：performance
点击 call tree 选项~~~~
详细的性能消耗列表
