close

羅圖馬文翻譯

-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);
以元素 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-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 倍 翻譯社 (游標移入可比較原來的模樣)

以中心為基準，縱向橫向縮放都會向上下或左右兩個標的目的內縮或擴大 翻譯社

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) 或 % (百分比) 。

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

background:rgba(90% 翻譯公司95%,100% 翻譯公司0.85);
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;

以下典範榜樣 翻譯每項主題都有加了對應的 css 結果，沒看到應當有的效果？

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

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

  • 說明：應用 css level 3 (css 3) 翻譯 transform 特征 (css properties) ，直接就能夠旋轉、傾斜、放大、縮小、移動元素 (elements) 翻譯 box ，甚至 3D 翻譯迴旋、透視 翻譯社包羅全部元素所有 翻譯內容也都隨之變形，不再侷限只能在僵硬 翻譯矩形框，對網頁排版及設計上會有很大 翻譯彈性和突破，並且對網頁正常 翻譯編排不會有互相架空問題，一格黏接一格耗時費工 翻譯殘腦時期終將走入歷史 翻譯社本篇僅先就 2D transform 翻譯部份接洽。
  • 適合：有 html 及 css 語法根本概念者 翻譯社
  • 難度：等級2
  • 更新：
  • 支援：具體可參考 Can I Use 翻譯社(至更新時，部份仍為廠商專屬擴充特征，須加上辨識詞)
標準語法
-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: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) 的方式的確沒什麼兩樣，然則這個移動體式格局除語法單純易懂外，還可連系其它變形，更具闡揚設計的便利。

transform 後的異常

  • 表格 (如 table) ：所有瀏覽器有用。指定 border-collapse:collapse; 特征 (儲存格間沒空地空閑) ， firefox 原有 border 會消逝 翻譯社
  • 表格貯存格、表格列：在外層 table 元素指定了 border-collapse:collapse; 特性 (貯存格間沒閑暇) ，各家瀏覽器產生有趣的出現，讀者可以自行嘗嘗。
  • 擬元素 (Pseudo-elements) ： ::first-letter, ::first-line 都不支援。
參考資本
  • css Transforms - w3c 官方文件 (英文) 。
  • Matrix Filter - microsoft 官方文件 (英文) 。
  • Cross Browser CSS Transforms – even in IE by zoltan (英文) 翻譯社
漫衍、展現請參閱 Creative Commons 授權條則，制止重混，引述請增添原文保持。
文章標籤
transform 變形 rotate scale translate skew matrix 特征 scalex scaley 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° 、或是範例 翻譯 π 弧度 (轉半圈) ，就會翻倒了 翻譯社 (游標移入中間可比力本來 翻譯模樣)

元素顛末變形後，瀏覽器會以插補像素 (interpolation) 運算後重新繪製顯現，以下降出現鋸齒或恍惚的現象，這是值得讚許 翻譯技術，因為不再需要花沒必要要的功夫行止理變形後圖形失真或文字恍惚的問題 翻譯社各家瀏覽器插補運算方式固然不盡不異，所以看起來會有些許差異。

ie8 及較舊版，可使用 ie 專屬擴充特性 Matrix filter (ie9 起已不再支援) ，道理與 transform:matrix(a,b,c 翻譯公司d,e 翻譯公司f) 是一樣的，語法大致上會是如許：



引用自: http://boohover.pixnet.net/blog/post/35341387-%E6%97%8B%E8%BD%89%E3%80%81%E5%82%BE%E6%96%9C%E3%80%81有關翻譯的問題歡迎諮詢天成翻譯社
arrow
arrow
    文章標籤
    翻譯社
    全站熱搜
    創作者介紹
    創作者 walkera8175m7 的頭像
    walkera8175m7

    andrewether21