CSS學習筆記-2D轉換模塊

2D轉換模塊：
    一、旋轉
        1.1格式：
            transform:rotate(45deg);
        1.2含義：
            表示旋轉多少度
    二、平移：
        2.1格式：
            transform:translate(100px,-100px);
        2.2含義
            第一個參數：水平方向
            第二個參數：垂直方向
    三、縮放：
        3.1格式
            transform:scale(1.5,1);
        3.2含義·
            第一個參數：水平方向縮放
            第二個參數：垂直方向
        3.3注意點：
            (1）若是取值是1，表明不變；
            (2）若是取值大於1，表明放大；
            (3）若是取值小於1，表明縮小；
            (4）若是水平和垂直都同樣，則能夠只寫一個參數；
    四、注意點：
        4.1    若是須要進行多個轉換，那麼用空格隔開，如：
            transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5)
        4.2 2D的轉換模塊會修改元素的座標系，旋轉以後再進行平移將參照新座標系移動


2D轉換模塊-形變中心點
    一、默認狀況下，全部元素都是以本身的中心點做爲參考來進行旋轉的，能夠經過改變中心點屬性來修改他的參考點
    二、格式：
        transform-origin:200px 0px;
        第一個參數：水平方向
        第二個參數：垂直方向
    三、注意點：
        3.1值有三種形式：
            （1）具體像素，如：
                transform-origin:100px 100px;
            （2）百分比，如：
                transform-origin:50% 50%;
            （3）特殊關鍵字，如：
                transfrom-origin:left top;
        3.2形變中心點不只對旋轉有影響，對元素的縮放、傾斜等也有影響，但在企業開發中使用較少


2D轉換模塊-旋轉軸向
    一、默認狀況下，全部軸都是圍繞Z軸進行旋轉
    二、格式：
        2.1圍繞Z軸：
            transform:rotateZ(45deg);
        2.2圍繞X軸：
            transform:rotateX(45deg);
        2.3圍繞Y軸：
            transform:rotateY(45deg);


2D轉換模塊-透視屬性：
    一、透視即近大遠小
    二、格式：
        perspective:500px;
    三、取值：
        取值意味着觀察物體的距離，值越大越不明顯，越小越明顯
    四、注意點：
        透視屬性必須添加到須要呈現透視效果的元素的上級(父)元素上！


本節專業詞語及含義：
    deg(degree):    度、程度
    transform:        轉換、變形
    rotate:            旋轉
    translate：         平移  
    scale:            縮放、比例
    origin:            原點
    perspective:    透視的