Title/ CSS Transform完全指南(第二版) #flight.Archives007
序: V2.1了! 終身學習, 堅持創作, 為生活埋下微小的信仰. 我是
忘我思考,共同進步!簡介: 一篇最簡約高效的CSS Transform教程.
Tag/ Transform介紹
CSS的 transform 可以讓元素產生變形效果,比如旋轉,縮放,傾斜或平移
element {
transform: scale(0.5) translate(10px, 10px); /*`transform` 支持同時指定多個函數.*/
}
上面代碼中 element 會縮放一半大小, 同時向右和向下各平移 10px.
接下來逐一介紹現支持的所有 Transform 函數.
Tag/ Transform 函數介紹
Matrix(矩陣計算)相關函數
-
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)這個函數涉及高等數學知識, 矩陣變換, 使用非常復雜 ,隨后介紹的
rotate,scale,skew,translate函數都是基於這個matrix函數實現的但是在實戰中直接使用這個函數的情況不大, 多數是間接使用基於該方法實現的函數, 所以本文不詳細介紹該方法.
就像Canvas中的
webgl, 在實戰中一般都是使用基於webgl實現的JS庫, 如three.js關於
matrix矩陣的詳細內容可以參見 https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩陣/ -
matrix(a, b, c, d, tx, ty)這個函數是
matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)的簡寫形式.
Perspective(透視深度)相關函數
-
perspective(l)l:<length>, 表示透視深度, 在值為正數時生效
Rotate(旋轉)相關函數
-
rotate3d(x, y, z, a)x,y,z,a:<angle>, 橫坐標, 縱坐標, Z坐標 和 順時針旋轉的角度 -
rotate(a)a:<angle>, 表示順時針旋轉的角度 -
rotateX(a)a:<angle>, 表示橫坐標旋轉的角度 -
rotateY(a)a:<angle>, 表示縱坐標旋轉的角度 -
rotateZ(a)a:<angle>, 表示Z坐標旋轉的角度
Scale(縮放)相關函數
-
scale3d(sx, sy, sz)sx,sy,sz:<percentage>, 在X軸, Y軸, Z軸上的縮放大小.參數取值為
1時不進行縮放處理, 在[0~1]區間按比例縮小, 在[>1]時按比例放大.參數取負值時元素將沿原點中心翻轉.
-
scale(sx, [sy])sx,sy(可選):<percentage>, 在X軸, Y軸上的縮放大小. -
scaleX(s)s:<percentage>, 在X軸上的縮放大小. -
scaleY(s)s:<percentage>, 在Y軸上的縮放大小. -
scaleZ(s)s:<percentage>, 在Z軸上的縮放大小.
Skew(傾斜)相關函數
-
skew(ax, [ay])ax,ay(可選):<angle>, 元素沿X軸和Y軸傾斜的角度 -
skewX(a)a:<angle>, 元素沿X軸傾斜的角度 -
skewY(a)a:<angle>, 元素沿Y軸傾斜的角度
Translate(平移)相關函數
備注: translate 是一個CSS屬性, 可以單獨使用, 用法與函數一致.
-
translate3d(tx, ty, tz)tx,ty,tz:<length>, 元素沿X軸,Y軸和Z軸平移的距離. -
translate(tx, [ty])tx,ty(可選):<length>, 元素沿X軸和Y軸平移的距離. -
translateX(t)t:<length>, 元素沿X軸平移的距離. -
translateY(t)t:<length>, 元素沿Y軸平移的距離. -
translateZ(t)t:<length>, 元素沿Z軸平移的距離.
Tag/ Transform 相關屬性介紹
-
transform-origin指定元素變形的原點, 默認值為
center.可取值:
transform-origin: 2px; /*如果只有一個值, 則表示原點的橫坐標*/ transform-origin: 2px 2em; /*如果有兩個值, 則分別表示原點的橫坐標和縱坐標*/ transform-origin: left top; /*可以使用關鍵字: left, center, right, top 或 bottom*/ transform-origin: top right; /*如果兩個值都是關鍵字, 則可以先縱坐標, 后橫坐標*/ transform-origin: 20px left; /*這是錯誤的表示. 如果關鍵字和長度單位同時使用, 不可以都表示縱坐標或橫坐標*/ transform-origin: 2px 10% 20px; /*如果有三個值, 則前兩個值用法不變, 第三個值表示原點的深度(Z坐標)*/ -
transform-style指定元素的子元素是位於 3D 空間中還是平面中, 默認值是
flat.可取值:
transform-style: flat; /*子元素位於獨立的平面*/ transform-style: preserve-3d; /*子元素位置繼承自父元素的3d位置*/ -
transform-box指定變形的布局框
可取值
/*不了解CSS Box Model的, 可以去搜一下, 本文不詳細介紹.*/ transform-box: content-box /*使用內容框為盒布局方式*/ transform-box: border-box /*使用邊框框為盒布局方式*/ transform-box: fill-box /*使用填充邊界框為盒布局方式, 填充邊界框是僅包含元素幾何形狀的框. 對於基本形狀, 這是填充的區域.*/ transform-box: stroke-box /*使用描邊框為盒布局方式. 描邊框是包含元素的幾何形狀及其筆畫形狀的邊界框.*/ transform-box: view-box /*使用最近父元素的SVG Viewport為盒布局方式*/ -
perspective可以獨立為一個CSS屬性, 指定透視深度, 和作為函數使用方法一致.
-
perspective-origin指定了3d觀察者的位置, 值為
perspective屬性的消失點可取值:
/*x-position 和 y-position 都是 <length-percentage> 值, 可取負值*/ /* 可使用的關鍵字: x-position: left(0%), center(50%), right(100%) y-position: top(0%), center(50%), bottom(100%) */ perspective-origin: x-position; /*一個值*/ perspective-origin: x-position y-position; /*兩個值*/ perspective-origin: y-position x-position; /*如果兩個值都是關鍵字, 先y后x也是允許的*/
->> Reference link
MDN中文文檔 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
MDN 英文文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform-origin屬性介紹 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-originCSS-Tricks https://css-tricks.com/almanac/properties/t/transform/
Quackit https://www.quackit.com/css/css3/properties/css_transform-box.cfm
張鑫旭 - Matrix矩陣 https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩陣/
張鑫旭 - CSS動畫 https://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/
->> Version History
現在版本為V2.1, 下一版預計添加幾處 flight.Playground(hover QuickView) 以便互動式理解
詳見 Github(@flightmakers)
2021.8.17 在掘金發布V0.1
2021.8.18 補全內容. 發布V1.0, 添加了兩個鏈接
2021.8.24上午 補全了許多其他Transform屬性,發布V2
2021.8.24中午 又添加了兩個透視屬性, 發布V2.1