transform
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
transform
CSS 屬性可以讓你修改 CSS 可視化格式模型(visual formatting model)的空間維度。使用此屬性,元素可以被平移、旋轉、縮放和傾斜。
嘗試一下
如果這個屬性的值不是 none
,將會建立一個 stacking context。在這個情況下,此元素將被其所包含的 position: fixed
元素當成一個 containing block。
警告:只有可以變形的元素可以被變形,這包括所有被 CSS box model 掌管輸出的元素,除了視覺格式化模型, table-column box 和 table-colunm-group box。
語法
/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;
transform
屬性可能被指定為關鍵字值 none
或著一或多個 <transform-function>
值。
值
<transform-function>
-
可使用一個或多個 CSS transform 函數。複合的 transform 會由左至右的順序來套用。
none
-
設定為沒有套用任何 transform。
可使用性問題
改變尺寸和伸縮的動畫會影響網頁普遍的可使用性,因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能,最好在網頁中放上給使用者關閉這些功能的控制開關。
另外也可考慮使用 prefers-reduced-motion
這個媒體功能來寫一個在系統設定端的媒體查詢,讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。
瞭解更多:
正式定義
預設值 | none |
---|---|
Applies to | transformable elements |
繼承與否 | no |
Percentages | refer to the size of bounding box |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
Creates stacking context | yes |
標準語法
transform =
none |
<transform-list>
<transform-list> =
<transform-function>+
範例
平移、旋轉元素
HTML
<div>Transformed element</div>
CSS
div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
結果
更多範例
請參考使用 CSS transform 以及 <transform-function>
的更多範例。
規範
Specification |
---|
CSS Transforms Module Level 2 # transform-functions |
CSS Transforms Module Level 1 # transform-property |
瀏覽器相容性
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
參見
- 使用 CSS transform
<transform-function>
data type- A cross-browser 2D transform plugin for jQuery