什么是变换样式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绘制画布上的动画?一种是使用JavaScript或css控制元素position属性值的变化，实现动画效果。每一步的详细处理内容是：1.change（通过JavaScript或CSS改变一个元素的position属性值）2.Style（计算样式）：浏览器决定最终将哪些CSS规则应用到每个DOM元素上。3.Layout（布局）：浏览器计算最终屏幕上显示的每个DOM元素的大小和位置。并且整个页面上所有元素的位置都是相对的，所以任何一个元素的位置发生变化都会引起其他元素的连动变化。这个过程称为回流（rearrangement）。4.Paint（绘图）：在多个图层上绘制DOM元素的文字、颜色、图像、边框和阴影。最典型的就是背景和绝对定位中Z-index值不同的元素。5.Composite（渲染图层合并）：将图层按照合理的顺序进行合并，显示在屏幕上。比如某个元素的内容层放在背景层之上，可以在chrome开发者工具中的一个模块中查看同一坐标系下不同z-index值的元素的浏览器性能消耗：performance点击调用树选项~~~~查看详情PerformanceConsumptionList
