CSS3 transform變換

transform

CSStransform屬性容許你旋轉，縮放，傾斜或平移給定元素。這是經過修改CSS視覺格式化模型的座標空間來實現的。

旋轉 rotate()

旋轉rotate()函數經過指定的角度參數使元素相對原點進行旋轉。
它主要在二維空間內進行操做，設置一個角度值，用來指定旋轉的幅度。
若是這個值爲正值，元素相對原點中心順時針旋轉；若是這個值爲負值，元素相對原點中心逆時針旋轉。

<style>
    .wrapper {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border: 1px dotted red;
    }

    .wrapper div {
        width: 100px;
        height: 100px;
        background: lightgreen;
        transform: rotate(45deg);
    }
</style>

<div class="wrapper">
    <div></div>
</div>

扭曲 skew()

扭曲skew()函數可以讓元素傾斜顯示。它能夠將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜。這與rotate()函數的旋轉不一樣，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

Skew()具備三種狀況：
一、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按必定的角度值進行扭曲變形）第一個參數對應X軸，第二個參數對應Y軸。若是第二個參數未提供，則值爲0，也就是Y軸方向上無斜切
二、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）
三、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

.wrapper div {
    width: 100px;
    height: 100px;
    background: lightgreen;
    transform: skew(45deg);
}

縮放 scale()

縮放 scale()函數 讓元素根據中心原點對對象進行縮放。

縮放 scale() 具備三種狀況：
一、scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）,Y是一個可選參數，若是沒有設置Y值，則表示X，Y兩個方向的縮放倍數是同樣的。
二、scaleX(x)元素僅水平方向縮放（X軸縮放）
三、scaleY(y)元素僅垂直方向縮放（Y軸縮放）

.wrapper div {
    width: 100px;
    height: 100px;
    background: lightgreen;
    transform: scale(2);
}

位移 translate()

translate()函數能夠將元素向指定的方向移動，相似於position中的relative。或以簡單的理解爲，使用translate()函數，能夠把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。

translate咱們分爲三種狀況：
一、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
二、translateX(x)僅水平方向移動（X軸移動）
三、translateY(Y)僅垂直方向移動（Y軸移動）

.wrapper div {
    width: 100px;
    height: 100px;
    background: lightgreen;
    transform: translate(100px,100px);
}

矩陣 matrix()

matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，至關於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）從新定位元素,此屬性值使用涉及到數學中的矩陣，我在這裏只是簡單的說一下CSS3中的transform有這麼一個屬性值，若是須要深刻了解，須要對數學矩陣有必定的知識。

.wrapper div {
    width: 100px;
    height: 100px;
    background: lightgreen;
    transform: matrix(1,0,0,1,50,50);
}

原點 transform-origin

任何一個元素都有一箇中心點，默認狀況之下，其中心點是居於元素X軸和Y軸的50%處。
在沒有重置transform-origin改變元素原點位置的狀況下，CSS變形進行的旋轉、位移、縮放，扭曲等操做都是以元素本身中心位置進行變形。
但不少時候，咱們能夠經過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到須要的原點位置。
ransform-origin取值和元素設置背景中的background-position取值相似，以下表所示：