css transform 能旋轉、傾斜、縮放變形 box

  • 說明：運用 css level 3 (css 3) 的 transform 特性 (css properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ，甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。
  • 適合：有 html 及 css 語法基礎概念者。
  • 難度：
  • 更新：
  • 支援：詳細可參考 Can I Use 。(至更新時，部分仍為廠商專屬擴充特性，須加上辨識詞)
標準語法
transform: transform-function;
說明
  • 特性值不像一般的數值，而是以像數學函數的方式表示；因為數據需要經過較複雜的公式運算出四邊形四角的位置。依照各種不同的變形效果，有數種變形函數，稍後說明。
  • 預設值 none ；表示沒有套上任何變形。
  • 如果變形函數中使用百分比 (%) 做為移動的數據，以元素本身的 box 尺寸為百分比計算基準。注意，這和 css box 以容納區 (containing block) 尺寸為計算基準不同。
  • 同一元素可套用多個變形函數，函數間以半形空格間隔，瀏覽器會依序套用。
  • 預設變形的參考點在 box 中心，旋轉、傾斜、縮放、移動等都以參考點為基準。透過 transform-origin 特性 (稍後說明) ，可指定不同的位置點；例如我們想以元素的左上角為旋轉中心軸，或是中心軸改在元素的外面也可以。
  • 適用元素： transformable element 。
  • 適用媒體： visual 。
  • 不被繼承。
變形函數 2D 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 度。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有沿橫向傾斜。September, 2012 w3c 草書又復原此項
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%) 。
  • 適用元素：transformable element。
  • 適用媒體： visual 。
  • 不被繼承。
語法實例
transform-origin:100px 20px;
transform-origin:right;

廠商專屬擴充特性 (vendor-specific extensions) ₪

各家瀏覽器廠商都有自創的 css 特性或值 (多半指非 w3c 標準規範) ，可提供更多額外的功用。廠商經常為了搶先支援 w3c 未正式發佈的規範，也會先以擴充特性來處理。

廠商專屬擴充特性的語法： - (減號) 接上廠商辨識詞 (vendor identifier) ，再接 - (減號) 作為類似前置詞，然後再接 css 特性或值。最前面的 - (減號) 換成 _ (底線) 也可以，目前大多習慣用 - 。

以下列出幾個較常見的瀏覽器供應廠商：

  • -moz-特性：適用 firefox 等 Mozilla Gecko 系列。
  • -webkit-特性：適用 safari, google chrome 等系列。
  • -o-特性：適用 opera 系列； opera 15 後改版成 -webkit-。
  • -ms-特性：適用 ie 等 microsoft 系列。

例如在 ie 用到的濾鏡特性 -ms-filter 就是 。

思考 - css 變形效果 (css transform) 突破網頁排版障礙

css transform 變形效果支援的 html 元素，舉凡圖片 (img) 、視訊影片 (video) 、多媒體物件 (object) 都可以旋轉、傾斜，這讓設計者輕輕鬆鬆就能做出令人驚歎的視覺效果。

元素經過變形後，瀏覽器會以插補像素 (interpolation) 運算後重新繪製呈現，以降低出現鋸齒或模糊的現象，這是值得讚許的技術，因為不再需要花不必要的工夫去處理變形後圖形失真或文字模糊的問題。各家瀏覽器插補運算方式當然不盡相同，所以看起來會有些許差異。

至更新時， transform 特性在部分瀏覽器，如 google chrome, safari 等，仍為的專屬擴充特性，所以在特性前需要加上廠商辨識詞，稍後範例的語法以較淡色呈現這部分。而新版的 firefox 及 ie 10 已不需加廠商辨識詞。

每個範例的 css 都有指定相同的背景顏色、相同的 border 。另外加了紅色瞄準標記，只是為了表示變形參考點位置，所以語法內沒有列出。
background:rgba(90%,95%,100%,0.85);
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;

以下範例的每項主題都有加了對應的 css 效果，沒看到應該有的效果？

旋轉效果 transform:rotate(θ)

旋轉的變形矩陣語法 transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

以元素 box 中心點為旋轉軸，順時針旋轉 3° 。 (游標移入可比較原來的樣子)

元素的所有內容，包括文字、圖片也都旋轉，而且不會影響其它版面編排。

-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
以元素 box 右下角為旋轉軸，逆時針旋轉 3° (負數角度) 。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定右下角為旋轉的基準點。

-moz-transform-origin:right bottom;
-moz-transform:rotate(-3deg);
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-3deg);
-o-transform-origin:right bottom;
-o-transform:rotate(-3deg);
-ms-transform-origin:right bottom;
-ms-transform:rotate(-3deg);
transform-origin:right bottom;
transform:rotate(-3deg);
翻轉效果，倒過來看…還有什麼不可能？

旋轉 180° 、或是範例的 π 弧度 (轉半圈) ，就會翻倒了。 (游標移入中心可比較原來的樣子)

-moz-transform:rotate(3.14159rad);
-webkit-transform:rotate(3.14159rad);
-o-transform:rotate(3.14159rad);
-ms-transform:rotate(3.14159rad);
transform:rotate(3.14159rad);

傾斜效果 transform:skewX(θ), transform:skewY(θ), transform:skew(θx,θy)

傾斜的變形矩陣語法 transform:matrix(1,tanθy,tanθx,1,0,0)

以元素 box 下緣中間為基準，沿著橫向 (橫軸) 平行方式傾斜 20° 。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定下緣中間為傾斜的基準點，只用特性值 bottom ，另一方向視為 center 。

-moz-transform-origin:bottom;
-moz-transform:skewX(20deg);
-webkit-transform-origin:bottom;
-webkit-transform:skewX(20deg);
-o-transform-origin:bottom;
-o-transform:skewX(20deg);
-ms-transform-origin:bottom;
-ms-transform:skewX(20deg);
transform-origin:bottom;
transform:skewX(20deg);
以元素 box 左側中間為基準，沿著縱向 (縱軸) 以平行方式傾斜 5° 。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定左緣中間為傾斜的基準點，只用特性值 left ，另一方向視為 center 。

-moz-transform-origin:left;
-moz-transform:skewY(5deg);
-webkit-transform-origin:left;
-webkit-transform:skewY(5deg);
-o-transform-origin:left;
-o-transform:skewY(5deg);
-ms-transform-origin:left;
-ms-transform:skewY(5deg);
transform-origin:left;
transform:skewY(5deg);
沿橫向傾斜 -25°，也沿縱向傾斜 5° 。 (游標移入可比較原來的樣子)

連續指定沿著橫軸及縱軸傾斜。

-moz-transform:skewX(-25deg) skewY(5deg);
-webkit-transform:skewX(-25deg) skewY(5deg);
-o-transform:skewX(-25deg) skewY(5deg);
-ms-transform:skewX(-25deg) skewY(5deg);
transform:skewX(-25deg) skewY(5deg);

縮放效果 transform:scaleX(m), transform:scaleY(m), transform:scale(mx,my)

縮放的變形矩陣語法： transform:matrix(mx,0,0,my,0,0)

以元素 box 左側中間為基準，橫向 (僅寬) 放大 1.2 倍。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定左側中間為放大的基準點，只用特性值 0 ，垂直方向視為 center 。

-moz-transform-origin:0;
-moz-transform:scaleX(1.2);
-webkit-transform-origin:0;
-webkit-transform:scaleX(1.2);
-o-transform-origin:0;
-o-transform:scaleX(1.2);
-ms-transform-origin:0;
-ms-transform:scaleX(1.2);
transform-origin:0;
transform:scaleX(1.2);
以元素 box 中心為基準，縱向 (僅高) 放大 1.8 倍。 (游標移入可比較原來的樣子)

以中心為基準，縱向橫向縮放都會向上下或左右兩個方向內縮或擴大。

-moz-transform:scaleY(1.8);
-webkit-transform:scaleY(1.8);
-o-transform:scaleY(1.8);
-ms-transform:scaleY(1.8);
transform:scaleY(1.8);
以元素 box 左側中間為基準，橫向縮小 0.8 倍、縱向放大 1.8 倍。 (游標移入可比較原來的樣子)

scale() 指定 2 個參數依序表示橫向、縱向縮放，等於是結合 scaleX(), scaleY() 。以 transform-origin 特性指定左側中間為縮放的基準點，只用特性值 0 ，垂直方向視為 center 。

-moz-transform-origin:0;
-moz-transform:scale(0.8,1.8);
-webkit-transform-origin:0;
-webkit-transform:scale(0.8,1.8);
-o-transform-origin:0;
-o-transform:scale(0.8,1.8);
-ms-transform-origin:0;
-ms-transform:scale(0.8,1.8);
transform-origin:0;
transform:scale(0.8,1.8);
以元素 box 中心為基準，橫向縱向等比例縮小 0.8 倍。 (游標移入可比較原來的樣子)

簡單地只指定 1 個參數表示橫向、縱向縮放同一比例，也就是等同 scale(0.8,0.8) 的意思。

-moz-transform:scale(0.8);
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
鏡射效果，就像倒影或照鏡子效果。

負數的縱向縮放參數產生上下顛倒的效果，負數的橫向縮放參數產生左右顛倒的效果，就像倒影或照鏡子效果。 (游標移入桃紅色符號中央可比較原來的樣子)

-moz-transform:scaleY(-1.8);
-webkit-transform:scaleY(-1.8);
-o-transform:scaleY(-1.8);
-ms-transform:scaleY(-1.8);
transform:scaleY(-1.8);

移動效果 transform:translateX(o), transform:translateY(o), transform:translate(ox,oy)

移動的變形矩陣語法： transform:matrix(1,0,0,1,ox,oy)

以元素 box 中心點為基準，向右橫向移動 60 像素。 (游標移入可比較原來的樣子)

橫向移動，正值向右、負值向左。這樣的效果和以往運用 position:relative; 指定位移 (offset) 的方法簡直沒什麼兩樣，但是這個移動方式除了語法單純易懂外，還可結合其它變形，更具發揮設計的便利。

-moz-transform:translateX(60px);
-webkit-transform:translateX(60px);
-o-transform:translateX(60px);
-ms-transform:translateX(60px);
transform:translateX(60px);
以元素 box 中心點為基準，向右橫向移動本身寬度 50% 的距離。 (游標移入可比較原來的樣子)

以百分比為單位，橫向移動以元素本身的寬度計算，縱向移動則以的高度計算；這和 css box 以容納區 (containing block) 尺寸為百分比計算的基準不同。

-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
-o-transform:translateX(50%);
-ms-transform:translateX(50%);
transform:translateX(50%);
以元素 box 中心點為基準，向下縱向移動 0.75em。 (游標移入可比較原來的樣子)

縱向移動，正值向下、負值向上。

-moz-transform:translateY(0.75em);
-webkit-transform:translateY(0.75em);
-o-transform:translateY(0.75em);
-ms-transform:translateY(0.75em);
transform:translateY(0.75em);
以元素 box 中心點為基準，向左 40 像素、向下 8 像素，整個朝左下方向移動。 (游標移入可比較原來的樣子)

translate() 指定 2 個參數依序表示橫向、縱向移動距離，等於是結合 translateX(), translateY()。如果只指定 1 個，省略的第 2 個參數，會視為 0 ；沒有另外指定縱向移動，translate(50px) 跟 translateX(50px)會是一樣的。

-moz-transform:translate(-40px,8px);
-webkit-transform:translate(-40px,8px);
-o-transform:translate(-40px,8px);
-ms-transform:translate(-40px,8px);
transform:translate(-40px,8px);

同時綜合多種不同變形效果。

以元素 box 中心點為基準，橫移 180 像素、旋轉 -5° 、縮小 0.8 。 (游標移入可比較原來的樣子)

同時在一個元素加入 3 種變形效果，以半形空格間隔，會依序運算套用。

-moz-transform:translate(180px) rotate(-5deg) scale(0.8);
-webkit-transform:translate(180px) rotate(-5deg) scale(0.8);
-o-transform:translate(180px) rotate(-5deg) scale(0.8);
-ms-transform:translate(180px) rotate(-5deg) scale(0.8);
transform:translate(180px) rotate(-5deg) scale(0.8);
以元素 box 中心點為基準，旋轉 -5° 、縮小 0.8 、橫移 180 像素。 (游標移入可比較原來的樣子)

與前例套用相同 3 種變形效果，但是由於順序不同，仔細觀察其實是不同結果。橫移是在最後發生，所以實際上是延著旋轉後的角度 -5° 橫移 (不是水平方向) 。

-moz-transform:rotate(-5deg) scale(0.8) translate(180px);
-webkit-transform:rotate(-5deg) scale(0.8) translate(180px);
-o-transform:rotate(-5deg) scale(0.8) translate(180px);
-ms-transform:rotate(-5deg) scale(0.8) translate(180px);
transform:rotate(-5deg) scale(0.8) translate(180px);

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) 是一樣的，語法大致上會是這樣：

filter:progid:DXImageTransform.Microsoft.Matrix(…);

對照參數 M11→a, M21→b, M12→c, M22→d, Dx→e, Dy→f ，詳細可參閱 microsoft Matrix filter 。

transform 後的異常

  • 表格 (如 table) ：所有瀏覽器有效。指定 border-collapse:collapse; 特性 (儲存格間沒空隙) ， firefox 原有 border 會消失。
  • 表格儲存格、表格列：在外層 table 元素指定了 border-collapse:collapse; 特性 (儲存格間沒空隙) ，各家瀏覽器產生有趣的呈現，讀者可以自行試試。
  • 擬元素 (Pseudo-elements) ： ::first-letter, ::first-line 都不支援。
參考資源
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。
文章標籤
全站熱搜
創作者介紹
創作者 不老師 的頭像
不老師

網頁藝術思考 - <strong class="xtra"><i lang="en">CSS</i> 網頁設計藝術</strong>

不老師 發表在 痞客邦 留言(23) 人氣(224,582)