这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
transform:
作用：移动 旋转 缩放 倾斜不会影响布局 （提高层级） 参照自身中心
transform：
translatex ()平移x轴 translatey()平移y translate(x,y)
旋转:
transform:rotate(x,y,z)
缩放:
transform:scale(x,y)
倾斜:
transform:skew(x,y)
改变圆点:
transform-origin:x y可选值：center （0 0左上角）上下左右
复合写法：
transform：平移和旋转或者旋转和平移 一般先旋转在平移
设置景深：
作用：模拟用户距离屏幕的距离 值最好在800px以上：perspective：像素； 给父元素加
3d环境下要注意
：rotate和skew都会改变坐标轴的位置
设置景深：
perspective-orgin：x y 可选值：上下左右和中心
transform-style：
prespective-3D 如果有多个子元素使用了3D变换效果就要添加这个属性 作用：用来显示正确的3D 变化的子元素父元素加 自身用到了3D变换并且子元素也用到了3D变化就必须添加这个属性
性能：
变换样式性能最好
1.change构建dom树解析html
2.style计算样式 解析css
3.layout布局计算dom元素的最终位置 render最消耗性能
4.paint绘制图层，绘制元素的颜色，图像，阴影和transform，z-index
5.composite渲染合并图层
页面的重绘：
当页面的背景颜色，图片，阴影和transform，z-index发生变化的时候就会触发 重绘的触发不会造成重排
页面的重排：
当页面的html元素的结构和位置发生了交换就会触发重排 重排触发一定会触发重绘
animation-name：动画名称 支持多个值的书写
animation-delay：动画延迟
animation-duration：动画时长
animation-timing-function:动画的运动速率· 可选值：steps（数字）
animation-iteration-count：动画的次数：可选值：infinite无限的
animation-direction：动画的方向：可选值：alternate：正向播放 reverse:反向播放
animation-fill-mode：动画结束时的状态：可选值：forwards保留最后一帧的位置 backwards回到第 一帧的位置
animation-play-state：动画播放时候的状态：可选值：running：自动播放 复合写法：animation：name，duration，timing-function，delay，iteration-count，direction，fill-mode，play-state
