CSS3新特性transform1）概述：四个常用函数：displacementtranslate；缩放比例；旋转旋转；倾斜倾斜。2)翻译常见写法：translateX()//沿x方向移动一定距离translateY()//沿y方向移动一定距离translate(,?)//沿x、y方向移动一定距离translateZ(),父容器perspective:xxxpx//沿z方向移动一定距离（从透视位置看，垂直于显示平面)translate3d(x,y,z)经验：绝对居中：父元素声明position:relative子元素声明position:absolute后，声明top:50%left:50%transform:translate(-50%,-50%);3）scale的常用写法：scaleX()//在x方向缩放到一定倍数scaleY()//在y方向缩放到一定倍数scale(,?)//缩放到一定倍数的整体体验：少用，因为容易把图片弄模糊4)旋转的常用写法rotate([|]);//相当于rotateZ([|])，沿z轴旋转一定角度rotateZ([|]);//沿z轴旋转一定角度rotateX([|]);//沿x轴旋转一定角度rotateY([|]);//沿y轴旋转一定角度经验：一般用于制作loading（加载）图形，旋转360度。现在你可以查看rotate的文档了。5）skew的常用写法是skewX([|]);//偏斜Y([<角度e>|<零>]);//沿z轴旋转一定角度skew([|],[|]?);//沿x轴旋转一定角度图→→→经验：用得少的时候搜索skewMDN文档:transition:属性名durationtransitionmodedelay可以用逗号分隔两个不同的属性，例如：transition:左1，前4；可以用all表示所有属性，例如：transition:all1s;常用的过渡方式：线性|轻松|缓出|缓入|ease-in-out时间参数个数：0：无效1：duration2：依次给duration和delay赋值2）特别注意：不是所有的属性都可以transition:display:none=>display:block不能transition一般使用visibility:hidden=>visibility:visible可以过渡背景色，可以过渡渐变透明度，opacity:1;=>不透明度：0.5；3）过渡必须有一个开始！！animation1)声明方式：.aclass{animation:动画名称durationtransitionmethod...}@keyframes动画名称{0%{//propertyexample=>top:0;}100%{//属性示例=>top:100px;}}2)语法属性：animation:duration|过渡方法|延迟|时代|方向|/2.4/infinite(不间断循环播放动画)direction:reverse(反向播放)/alternate(来回播放，即向前向后，向前向后，常用)fillingmode：none/forwards/backwards/both是否暂停：paused/running（可用于制作停止和继续动画的按钮）浏览器渲染过程（一）步骤BuildanHTMLtree(DOM)basedonHTML)Buildacsstree(CSSOM)basedoncssMergethe将上面两棵树合并为一棵渲染树（rendertree）Layout（布局）：处理文档流、框模型、计算大小和位置Paint（绘制）：绘制边框颜色、文本颜色和阴影Compse（合成）：显示根据级联关系渲染图片（二）更新样式一般我们使用js更新样式方法一：JS→样式→布局→绘图→合成，例如：div.remove方法二：JS→样式→绘图→合成例如：改变背景颜色方法三：JS→样式→合成例如：Changetransform(3)每个属性更新的过程是什么？你可以在这里找到你想要的！https://csstriggers.com/aboutposition（定位）1.static（默认）：脱离文档流2.relative（相对定位）：不脱离文档流，上升使用场景：makedisplacement（很少使用)对绝对元素做爸爸配合z-index：管理上下文级联覆盖3.absolute（绝对定位）：脱离文档流，升起使用场景脱离文档流，相对于相对爸爸定位鼠标提示：悬停上图，鼠标经过时出现，鼠标离开时消失z-index的体验：1.绝对元素是相对于祖先元素中离自己最近的元素定位的2.有的浏览器不写top，而left会放错位置3.善用100%4.fixed：fixed定位，相对视口定位，使用场景广告窗口顶部按钮配合z-index使用体验：尽量不要固定在手机上使用，问题很多5.Sticky：从效果上看，Sticky就像一个混合体，页面滑动到“临界点”之前是相对的，当到达“临界点”时“，它是固定的。只有两个合作使用CSSSticky需要条件：position:sticky;顶部：0；//right/bottom/left的任何有效值，即使是负像素值top:0表示当元素滑动到距视口0px的距离时，它会继续滑动。元素的顶部是一个有趣的属性，但是兼容性差总结：定位元素在堆叠上下文的顶部
