css transform 能旋轉、傾斜、縮放變形 box
- 說明：運用 css level 3 (css 3) 的 2D
transform特性 (css properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box 。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。 - 適合：有 html 及 css 語法基礎概念者。
- 難度：
- 更新：2011-07-13
- 支援： firefox, safari, google chrome, opera, ie9 (至撰文時，皆仍為廠商專屬擴充特性，須加上辨識詞) 。
- 標準語法
transform: transform-function;- 說明
- 特性值不像一般的數值，而是以像數學函數的方式表示；因為數據需要經過較複雜的公式運算出四邊形四角的位置。依照各種不同的變形效果，有數種變形函數，稍後說明。
- 預設值
none；表示沒有套上任何變形。 - 如果變形函數中使用百分比 (%) 做為移動的數據，以元素本身的 box 尺寸為百分比計算基準。注意，這和 css box 以容納區 (containing block) 尺寸為計算基準不同。
- 同一元素可套用多個變形函數，函數間以半形空格間隔，瀏覽器會依序套用。
- 預設變形的參考點在 box 中心，旋轉、傾斜、縮放、移動等都以參考點為基準。透過
transform-origin特性 (稍後說明) ，可指定不同的位置點；例如我們想以元素的左上角為旋轉中心軸，或是中心軸改在元素的外面也可以。 - 適用元素： block-level and inline-level elements 。
- 適用媒體： visual 。
- 不被繼承。
- 變形函數
transform-function(transformation functions) ₪ 函數括號內的角度
θ參數必須有單位，可以是deg(角度 ° ) 、rad(弧度) 、grad(梯度) ，大小寫都可接受；m,a,b,c,d,e,f參數為數字，不需要單位；o參數為合法的尺寸值 (length) 或 % (百分比) 。rotate(θ)- 指定元素以參考點為中心軸 2D 旋轉
θ度。 skewX(θ)- 指定元素以參考點為中心軸沿著橫向傾斜
θ度。 skewY(θ)- 指定元素以參考點為中心軸沿著縱向傾斜
θ度。 skew(θx,θy)- 指定元素以參考點為中心軸沿著橫向傾斜
θx度、 縱向傾斜θy度，等於是結合skewX(θx),skewY(θy)。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有沿橫向傾斜。 scaleX(m)- 指定元素由參考點橫向縮放
m倍。 scaleY(m)- 指定元素由參考點縱向縮放
m倍。 scale(mx,my)- 指定元素由參考點 2D 橫向縮放
mx倍、縱向縮放my倍，等於是結合scaleX(mx),scaleY(my)。參數如果只指定 1 個，省略的第 2 個參數，會等於第 1 個，也就是橫向、縱向以相同比例縮放。 translateX(o)- 指定元素由參考點橫向移動
o距離。 translateY(o)- 指定元素由參考點縱向移動
o距離。 translate(ox,oy)- 指定元素由參考點 2D 橫向移動
ox距離、縱向移動oy距離，等於是結合translateX(ox),translateY(oy)。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有橫向移動。 matrix(a,b,c,d,e,f)- 指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形。矩陣的目的主要在運算出四邊形四角的座標，屬於數學問題，這裡就不作太多討論了。事實上，前述的各項變形函數都是簡化這個矩陣而拆解出來的，稍後範例會看到對照。有一些線上工具可以比較容易幫我們產生這些參數值。
- 語法實例
transform:rotate(3deg); transform:skewX(20deg); transform:scaleY(1.8); transform:translateX(60px); transform:translate(180px) rotate(-5deg) scale(0.8); transform:matrix(0,1.611,1.611,0.278,5,5);
後面會有更多例子討論。
transform-origin 特性 (property) 指出變形的參考點座標 (中心軸) ₪
- 標準語法
transform-origin: x y;- 說明
- 共有 2 個特性值，每個值之間以至少一個半形空格間隔。
- 2 個值可以是尺寸值 (length) 或 % (百分比) 或方位關鍵字 (keywords) ； % 以元素本身的 box 尺寸為百分比計算基準。
- 使用尺寸值或 % ，依序表示參考點橫座標 (x) 、縱座標 (y) 。 padding-box 的左上角座標為 (0,0) 。
- 預設值為 50% 50% ；就是在 box 中心點。
- 使用方位關鍵字 (
center,top,right,bottom,left) ，依據字意即可表示方向和位置，所以 2 個值沒有順序問題。 - 如果省略第 2 個值，會視為
center(50%) 。 - 適用元素：block-level and inline-level elements。
- 適用媒體： visual 。
- 不被繼承。
- 語法實例
transform-origin:100px 20px;transform-origin:right;
廠商專屬擴充特性 (vendor-specific extensions) ₪
各家瀏覽器廠商都有自創的 css 特性 (多半指非 w3c 標準規範) ，可提供更多額外的功用。廠商經常為了搶先支援 w3c 未正式發佈的規範，也會先以擴充特性來處理。
廠商專屬擴充特性的語法： - (減號) 接上廠商辨識詞 (vendor identifier) ，再接 - (減號) 作為類似前置詞，然後再接特性。- (減號) 換成 _ (底線) 也可以，目前大多習慣用 - 。
以下列出幾個較常見的瀏覽器供應廠商：
-moz-特性：適用 firefox 等 Mozilla Gecko 系列。-webkit-特性：適用 safari, google chrome 等系列。-o-特性：適用 opera 系列。-ms-特性：適用 ie 等 microsoft 系列。
例如在 ie 用到的濾鏡特性 -ms-filter 就是 。本篇所討論的 transform 特性，撰文時也都暫時為各家擴充特性。
- 參考資源
- css 2D Transforms - w3c 官方文件 (英文) 。
- Matrix Filter - microsoft 官方文件 (英文) 。
- Cross Browser CSS Transforms – even in IE by zoltan (英文) 。
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。
] ，然後定義成背景圖片 (
CSS selectors語法(CSS教學) (3)
思考 - css 變形效果 (css
transform) 突破網頁排版障礙css
transform變形效果支援的 html 元素，舉凡圖片 (img) 、視訊影片 (video) 、多媒體物件 (object) 都可以旋轉、傾斜，這讓設計者輕輕鬆鬆就能做出令人驚歎的視覺效果。元素經過變形後，瀏覽器會以插補像素 (interpolation) 運算後重新繪製呈現，以降低出現鋸齒或模糊的現象，這是值得讚許的技術，因為不再需要花不必要的工夫去處理變形後圖形失真或文字模糊的問題。各家瀏覽器插補運算方式當然不盡相同，所以看起來會有些許差異。
撰文時，
transform特性都還是各家的專屬擴充特性，所以在特性前都需要加上廠商辨識詞，稍後範例的語法以較淡色呈現這部分。border。另外加了紅色瞄準標記，只是為了表示變形參考點位置，所以語法內沒有列出。以下範例的每項主題都有加了對應的 css 效果，沒看到應該有的效果？
旋轉效果
transform:rotate(θ)旋轉的變形矩陣語法
transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)元素的所有內容，包括文字、圖片也都旋轉，而且不會影響其它版面編排。
以
transform-origin特性指定右下角為旋轉的基準點。旋轉 180° 、或是範例的 π 弧度 (轉半圈) ，就會翻倒了。 (游標移入中心可比較原來的樣子)
傾斜效果
transform:skewX(θ),transform:skewY(θ),transform:skew(θx,θy)傾斜的變形矩陣語法
transform:matrix(1,tanθy,tanθx,1,0,0)以
transform-origin特性指定下緣中間為傾斜的基準點，只用特性值bottom，另一方向視為center。以
transform-origin特性指定左緣中間為傾斜的基準點，只用特性值left，另一方向視為center。skew()指定 2 個參數依序表示沿著橫軸及縱軸傾斜，等於是結合skewX(),skewY()。如果只指定 1 個，省略的第 2 個參數，會視為 0 ；沒有另外指定縱向傾斜，skew(20deg)跟skewX(20deg)會是一樣的。縮放效果
transform:scaleX(m),transform:scaleY(m),transform:scale(mx,my)縮放的變形矩陣語法：
transform:matrix(mx,0,0,my,0,0)以
transform-origin特性指定左側中間為放大的基準點，只用特性值 0 ，垂直方向視為center。以中心為基準，縱向橫向縮放都會向上下或左右兩個方向內縮或擴大。
scale()指定 2 個參數依序表示橫向、縱向縮放，等於是結合scaleX(),scaleY()。以transform-origin特性指定左側中間為縮放的基準點，只用特性值 0 ，垂直方向視為center。簡單地只指定 1 個參數表示橫向、縱向縮放同一比例，也就是等同
scale(0.8,0.8)的意思。負數的縱向縮放參數產生上下顛倒的效果，負數的橫向縮放參數產生左右顛倒的效果，就像倒影或照鏡子效果。 (游標移入桃紅色符號中央可比較原來的樣子)
移動效果
transform:translateX(o),transform:translateY(o),transform:translate(ox,oy)移動的變形矩陣語法：
transform:matrix(1,0,0,1,ox,oy)橫向移動，正值向右、負值向左。這樣的效果和以往運用
position:relative;指定位移 (offset) 的方法簡直沒什麼兩樣，但是這個移動方式除了語法單純易懂外，還可結合其它變形，更具發揮設計的便利。以百分比為單位，橫向移動以元素本身的寬度計算，縱向移動則以的高度計算；這和 css box 以容納區 (containing block) 尺寸為百分比計算的基準不同。
縱向移動，正值向下、負值向上。
translate()指定 2 個參數依序表示橫向、縱向移動距離，等於是結合translateX(),translateY()。如果只指定 1 個，省略的第 2 個參數，會視為 0 ；沒有另外指定縱向移動，translate(50px)跟translateX(50px)會是一樣的。同時綜合多種不同變形效果。
同時在一個元素加入 3 種變形效果，以半形空格間隔，會依序運算套用。
與前例套用相同 3 種變形效果，但是由於順序不同，仔細觀察其實是不同結果。橫移是在最後發生，所以實際上是延著旋轉後的角度 -5° 橫移 (不是水平方向) 。
matrix複雜的變形矩陣，稍舊版 ie 也能玩matrix。如果需要使用
matrix產生更複雜的變形，矩陣的數值實在很難以一般方式計算。真好！感謝 Zoltan 寫好了可以幫我們產生 6 個參數的線上工具程式 Matrix Construction Set ，不過要有支援 html 5 Drag and Drop 的瀏覽器才能使用；也感謝 WEB 前端開發 (CSS88.com) 做了線上工具程式可輸入 6 個參數立即看到測試結果。讀者自己玩玩看囉！ie8 及較舊版，可使用 ie 專屬擴充特性 Matrix filter (ie9 起已不再支援) ，原理與
transform:matrix(a,b,c,d,e,f)是一樣的，語法大致上會是這樣：對照參數
M11→a,M21→b,M12→c,M22→d,Dx→e,Dy→f，詳細可參閱 microsoft Matrix filter 。表格竟然也能旋轉。
transform規定只能作用在 block-level and inline-level 的元素，不過各家瀏覽器居然連表格類 (tabular) 也都有用。table) ：所有瀏覽器有效。指定border-collapse:collapse;特性 (儲存格間沒空隙) ， firefox 原有border會消失。th,td) ：僅 opera 無效。tr)table元素指定了border-collapse:collapse;特性 (儲存格間沒空隙) ，各家瀏覽器產生有趣的呈現，讀者可以自行試試。::before,::aftergoogle chrome, safari 無效；::first-letter,::first-line都不支援。