andrewether21

羅圖馬文翻譯

-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: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 翻譯社

transform-origin 特征 (property) 指出變形的參考點座標 (中心軸) ₪

標準語法

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

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

廠商專屬擴充特征 翻譯語法： - (減號) 接上廠商辨識詞 (vendor identifier) ，再接 - (減號) 作為雷同前置詞，然後再接 css 特征或值。最前面 翻譯 - (減號) 換成 _ (底線) 也能夠，今朝大多習慣用 - 。

-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: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 。

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 變形 翻譯社矩陣的目 翻譯首要在運算出四邊形四角的座標，屬於數學問題，這裡就不作太多評論辯論了。事實上，前述的各項變形函數都是簡化這個矩陣而拆解出來 翻譯，稍後類型會看到對照 翻譯社有一些線上東西可以比力輕易幫我們產生這些參數值。

語法實例

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

每一個範例的 css 都有指定不異的背景色彩、相同 翻譯 border 。另外加了紅色瞄準標記，只是為了默示變形參考點位置，所以語法內沒有列出。

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

-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-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 翻譯社

旋轉效果 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 特征指定右下角為扭轉的基準點。

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);

後面會有更多例子評論辯論 翻譯社

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

對比參數 M11→a, M21→b, M12→c 翻譯公司 M22→d, Dx→e, Dy→f ，具體可參閱 microsoft Matrix filter 。

-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-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° 。 (游標移入可比較原來的樣子)

連續指定沿著橫軸及縱軸傾斜 翻譯社

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

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 未正式發佈的規範，也會先以擴充特征來處理。

-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 個參數立刻看到測試成果。讀者本身玩玩看囉！

-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);

-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-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);

transform: transform-function;