前端基础复习--16浏览器前缀？transition 过渡？ transform变形？ transform的注意事项

1. 浏览器前缀？⭐️面试会问

    CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。

2. transition 过渡？

    transition-property  :  规定设置过渡效果的CSS属性的名称。
    transition-duration  :  规定完成过渡效果需要多少秒或毫秒。
    transition-delay  :  定义过渡效果何时开始。  ( 延迟(数值为正数)，也可以提前(数值为负数) )
    transition-timing-function  :  规定速度效果的速度曲线。
    可以直接写成一条  transition:1s 2s linear; 第一个表示transition-duration transition-delay transition-timing-function

    注：⭐️不要加到hover上，如果加到hover上，那移入的时候有过度，移开的时候就没有了。

3. transform变形？

    translate : 位移
        translateX
        translateY
        translateZ   ( 3d )
    
    scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）  只写一个值就是对宽缩放
        scaleX
        scaleY
        scaleZ   (3d)

    rotate : 旋转 （ 旋转的值，单位是角度 deg ）
        rotateX  (3d)    沿x旋转是往屏幕内的，所以是3d效果
        rotateY  (3d)
        rotateZ  ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )  沿y旋转是我们看到的2d平面内的旋转

    skew : 斜切
        skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
        skewY

    transform的注意事项：
        1. 变形操作不会影响到其他元素。
        2. 变形操作只能添加给块元素，但是不能添加给内联元素。
        3. 复合写法，可以同时添加多个变形操作。
            执行是有顺序的，先执行后面的操作，再执行前面的操作。
            translate会受到 rotate、scale、skew的影响
        4. transform-origin : 基点的位置
            x y z(3d)