transfrom樣式解析

transform樣式解析

1、transflom:translate(平移變換)

一、語法:transflom:translate(x,y) translateX() 
        translateY();要注意不要定義多transflow:translate
        值，平移能夠接受多個值寫法。
    二、利用transform還可使元素垂直居中，這種垂直居中是一
    種
    優秀的寫法以下代碼:
        一、給父級相對定位
        二、給須要劇中的元素絕對定位
        三、top：50%；
        四、left：50%；
        五、transfrom:translate(-50%,-50%)
    三、transfrom:translate()幾乎與相對定位概念一致當時仍是
    有
    本質的區別。

2、transform:rotate(旋轉變換）

一、語法:transfrom:rotate(*deg度數 *rad弧度 1rad約等於
    57.3度 *turn圈)
    二、默認是以元素的中心旋轉，元素設置transfrom:rotate;之
    後，裏面的全部屬性都會隨之旋轉。
    三、也能夠設置值transform:rotateX() rotateX();這是以
    css中的軸開始旋轉。

3、transform:scale(縮放變換)

一、語法:tarsform:scale(x y) 只寫一個值第二個值默認跟第
    一個值同樣。
        一、>1倍數放大
        二、0~1倍數縮小
        三、<-1倒置倍數放大
        四、0~-1倒置倍數縮小

4、transform:skew(傾斜變換)

一、語法:transform:skew(x y),只寫一個值時第一個值默認時
    x軸方向

5、transform-origin(變換基點)

一、語法:transform-origin:x y;(注意！沒有括號)關鍵字
    (center top bottom left right)
    二、只寫一個值時第二個值默認是center
    三、百分比值時是以自身元素百分比值

---

注意!

在書寫tansform的時候要注意前後順序，通常平移的要寫在最
    前面由於其餘變換在變換過程當中自身在數軸會發生改變，因此如
    果不規範寫的話會致使效果失效