前端Day18笔记

一、渐变
    渐变是作为background-image属性的属性值存在的
    1、线性渐变
        1）指定渐变的颜色-代码示例1：
            background-image: linear-gradient(red,blue,yellow,pink);
            表示设置背景图片为线性渐变，从红色到蓝色，再到黄色，再到粉色
            注意：
                括号中可以放多种颜色，中间用逗号隔开
        2）指定渐变的方向-代码示例2：
            background-image: linear-gradient(to right top,red,blue));
            表示设置背景图片为线性渐变，渐变方向为向右上方渐变，从红色到蓝色
            注意：
                渐变方向有left、right、top、bottom四个，也可以沿两个方向的夹角渐变
                渐变方向必须放颜色的前方否则会失效！！！
                渐变方向的默认值为to bottom向下渐变（180度）
        3）指定渐变的角度-代码示例3：
            background-image:linear-gradient(135deg,red,blue);
            表示设置背景图片为线性渐变，渐变方向为135度，从红色到蓝色
            注意：
                渐变角度的默认值为180度（向下渐变）
        4）指定开始渐变的位置-代码示例4：
            background-image:linear-gradient(red 100px,blue 200px,yellow 300px);
            表示设置背景图片为线性渐变，（默认向下渐变），0-100px为纯红色，从100px位置开始红色向蓝色渐变，从200开始蓝色向黄色渐变，300px之后是纯黄色 
            background-image:linear-gradient(red 100px,blue 150px,blue 170px,yellow 200px);
            表示设置背景图片为线性渐变，（默认向下渐变），0-100px为纯红色，100px开始由红色向蓝色渐变，150px-170px为纯蓝色，170px开始由蓝色向黄色渐变，200px之后为纯黄色
            
    2、径向渐变
        1）指定径向渐变的颜色-代码示例1：
            background-image: radial-gradient(red,blue,yellow);
            表示设置背景图片为径向渐变，（径向渐变的中心点默认最大水平直径为元素宽，默认最大垂直直径为元素高），由内向外依次从红色渐变到蓝色，再渐变到黄色
        2）指定渐变中心点的最大水平和垂直直径-代码示例2：
            background-image: radial-gradient(50px 50px,red,blue,yellow);
            表示设置背景图片为径向渐变，径向渐变中心点的最大水平直径为50px，最大垂直直径为50px，由内向外依次从红色渐变到蓝色再到黄色，最大半径之外的区域为纯黄色
        3）指定开始渐变的位置-代码示例3：
            background-image: radial-gradient(100px 200px,red 50px,blue 50px );
            表示设置背景图片为径向渐变，径向渐变中心点大水平直径为100px，最大垂直半径为200px，由内向外水平0-50px为纯红色，50px-50px为红色向蓝色渐变，50px之后为纯蓝色

    3、重复渐变
        1）重复线性渐变-代码示例1：
            background-image:repeating-linear-gradient(45deg,red 100px,blue 150px,yellow 200px); 
            表示设置背景图片为重复线性渐变，渐变方向为45度，从100px开始，100px-150px为红色向蓝色渐变，150px-200px蓝色向黄色渐变，然后重复这个过程填充整个元素
        2）重复径向渐变-代码示例2：
            background-image: repeating-radial-gradient(circle,red 0,red 20px,blue 20px, blue 40px);
            表示设置图片背景为重复径向渐变，径向渐变中心点为圆形，0-20px为纯红色，20px-20px为红色向蓝色渐变，20px-40px为纯蓝色，重复这个过程填充整个元素
    
    
二、2D变换 transform
    注意：变换（transform）这个属性对行内元素是无效的！！！
    1、2D平移
        transform: translateX();
        transform: translateY();
        transform: translate();
        代码示例：
        1）transform: translateX(200px);
            表示设置变换属性，让元素沿x轴平移200px
        2）transform: translateY(200px);
            表示设置变换属性，让元素沿y轴平移200px
        3）transform: translateX(50%);
            表示设置变换属性，让元素沿x轴平移自身宽度的50%
        4）transform: translateY(50%);
            表示设置变换属性，让元素沿y轴平移自身高度的50%
        5）transform: translate(200px,200px);
            表示设置变换属性，让元素沿x轴平移200px，沿y轴平移200px
        6）transform: translate(50%,50%)
            表示设置变换属性，让元素沿x轴平移自身宽度的50%，沿y轴平移自身高度的50%
        注意：
        1）像素和百分比可以设置负数，代表反向平移；
        2）括号中的像素和百分比可以混合使用；
        3）不会脱离文档流，平移就相当在页面中移动了自己所在位置
        4）设置的百分比代表的数值取决于元素自身的宽高
        
    2、2D旋转
        transform: rotate();
        代码示例：
        1）transform: rotate(30deg);
            表示设置变换属性，让元素（以基点为旋转中心）顺时针方向旋转30度
        注意：
        1）括号中写入一个度数，正值为顺时针旋转，负值为逆时针旋转
        
    3、2D缩放
        transform: scale();
        代码示例：
        1）transform: scale(1.2);
            表示设置变换属性，让元素（以基点为缩放中心）进行1.2倍放大
        注意：
        1）括号中写入一个大于0的数，默认元素自身为1，数值在0-1之间表示缩小到原来的多少倍，大于1表示放大到原来的多少倍
    
    4、2D倾斜【了解】
        transform: skew();
        代码示例：
        1）transform: skew(30deg);
            表示设置变换属性，让元素倾斜30度
        注意：
        1）括号中写入一个度数（正值负值都可以）
    
    5、2D变换的简写
        因为变换属性为transform，而平移、旋转、缩放和倾斜都是其属性值，当需要同时设置两种或两种以上的属性值时，必须合成一条css语句来写（否则会发生覆盖）
        1）代码示例：
            transform: translate(400px)  rotate(45deg) scale(2);
            表示设置变换属性，先平移，后旋转，最后缩放
        2）注意：
            书写顺序不同，变换的结果不同，写在前面的变换会先进行，因此要注意 书写顺序！！！
    
    
三、基点 transform-origin
    1、transform-origin 基点属性
        水平方位名词：left、right；
        垂直方位名词：top、bottom
        1）取值：
            ？px ？px ？px        x水平多少像素，y垂直多少像素，z多少像素
            水平方位 垂直方位 ？px        
        2）注意：
            水平和垂直方向可以写多少像素也可以写方位词，z只能用像素表示；
            像素可以取负值，表示反方向取像素
        
        
四、3D变换
    1、transform-style 空间选择
        1）transform-style: preserve-3d;
            preserve-3d属性值表示当前元素开启3d环境，子元素可以以3d的效果呈现（如果不写这个属性，默认是2d的环境）
            
    2、perspective 景深
        1）perspective: ？px;
            景深属性定义了平面离观察者的距离（近大远小），属性值为像素单位，值越大，平面离观察者越远
            
    3、3D平移
        1）transform: translateZ(？px);
            表示设置变换属性，在z片面中向里（或向外）平移多少个像素单位
            注意：
                这个属性值只有在父元素开启了3D环境才能生效！！！
        2）3D平移简写【简写】    
            transform: translate3d(？px,？px,？px);
            括号里分别代表x、y、z位移量
            
    4、3D旋转
        1）沿x轴旋转
            transform: rotateX(89deg);
            表示沿x轴旋转89度
        2）沿y轴旋转
            transform: rotateY(89deg);
            表示沿y轴旋转89度
        3）沿z轴旋转
            transform: rotateZ(89deg);
            表示沿z轴旋转89度
        4）3D旋转简写【简写】
            transform: rotate3d(1,1,0,50deg);
            括号里前三个值分别代表x、y、z轴，1表示旋转、0表示不旋转，最后的值代表旋转的度数