關於CSS3元素2D平面變換屬性transform的實現方法

CSS3的形狀變換允許我們對元素展開、縮放等等

這篇我主要談下一2D平面變換
屬性transform可以進行變換
transform就是變形的意思
並且它主要通過函數來使用，有以下函數

• translate() 平移變換

• ratate() 旋轉變換

• scale() 縮放變換

• skew() 傾斜變換

• matrix() 矩陣變換

transform-origin則時定義變換的中心

平移變換translate

translate()兩個參數，第一個是x軸相對位移，第二個參數是y軸相對位移

.demo {    ......    transform: translate(100px, 200px);  <--}

或者translate()可以拆成translateX()和translateY()
（小寫形式translatex/y也可以）

.demo {    ......    transform: translateX(100px) translateY(200px); /*改*/}

兩者是等價的，不過很麻煩
結果是元素向右平移了100px，向下平移了200px

旋轉變換rotate

rotate()一個參數，表示旋轉角度的‘xxdeg’，
正數順時針旋轉，允許負值

.demo {    ......    transform: rotate(30deg);}

結果是元素順勢針旋轉了30°
不過元素預設的旋轉中心是元素中心
修改變換中心可以用我們的transform-origin屬性
比如說我們想要讓元素沿著左上頂點旋轉

.demo {    ......    transform: rotate(30deg);    transform-origin: 0 0; /*增*/}

transform-origin的三個參數是 x軸距離（x-axis），y軸距離（y-axis），z軸距離（z-axis）
預設的形式就是transform-origin: 50% 50% 0;
x-axis可選值除了長度和百分比，還有left、center、right
y-axis可選值除了長度和百分比，還有top、center、bottom
z-axis可選值只有長度值，在2D變換中我們暫時用不到它

縮放變換scale

縮放元素就是改變元素的尺寸
兩個參數，寬度與高度縮放的倍率（無單位）
同樣可以拆成scaleX()與scaleY()

.demo {    ......    transform: scale(2,2);}

這樣就是把元素寬度擴大一倍，高度擴大二倍
注意這是真正意義的縮放
意思就是，如果你的元素中有文字會產生展開的效果
等價形式如下

.demo {    ......    transform: scaleX(2) scaleY(3); /*改*/}

可以通過transform-origin修改變換中心

傾斜變換skew

skew就是傾斜扭曲的意思
這個函數會讓你的元素線性扭曲
兩個參數，x軸與y軸的扭曲角度，同樣是xxdeg的形式

.demo {    ......    transform: skew(10deg,20deg);}

等價

.demo {    ......    transform: skewX(10deg) skewY(20deg); /*改*/}

同樣可以通過transform-origin修改變換中心，不再贅述

矩陣變換matrix

聽起來超級NB，實際上呢
真的是超級NB
矩陣變換用的比較少，它是上面所有變換的基礎
我懂得也不是很深
作為一個數學系的學生，確實慚愧T^T
matrix變換有6個參數，可以控制元素的旋轉、平移、傾斜和縮放
比如下面的代碼把元素旋轉了30°，x、y軸各平移20px

.demo {    ......    transform: matrix(0.866,0.5,-0.5,0.866,20,20);}

如果對數學有興趣的同學，我推薦張鑫旭大神的文章傳送門
沒準以後我心血來潮也寫一篇矩陣的文章……

今天要講的東西比較簡單就不放圖了
3D變換相關屬性 –>傳送門