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

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

這篇我主要談下一2D平面變換
屬性trans form可以進行變換
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變換相關屬性–>傳送門

以上是關於CSS3元素2D平面變換屬性transform的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！