transform

transform CSS 屬性可以讓你修改 CSS 可視化格式模型(visual formatting model)的空間維度。使用此屬性,元素可以被平移、旋轉、縮放和傾斜。

嘗試一下

如果這個屬性的值不是 none,將會建立一個 stacking context (en-US)。在這個情況下,此元素將被其所包含的 position: fixed 元素當成一個 containing block。

警告: 只有可以變形的元素可以被變形,這包括所有被 CSS box model 掌管輸出的元素,除了視覺格式化模型 (en-US), table-column box (en-US)table-colunm-group box (en-US)

語法

css
/* 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> (en-US)

可使用一個或多個 CSS transform 函數 (en-US)。複合的 transform 會由左至右的順序來套用。

none

設定為沒有套用任何 transform。

可使用性問題

改變尺寸和伸縮的動畫會影響網頁普遍的可使用性,因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能,最好在網頁中放上給使用者關閉這些功能的控制開關。

另外也可考慮使用 prefers-reduced-motion (en-US) 這個媒體功能來寫一個在系統設定端的媒體查詢 (en-US),讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。

瞭解更多:

正式定義

預設值 (en-US)none
Applies totransformable elements
繼承與否no
Percentagesrefer to the size of bounding box
Computed value (en-US)as specified, but with relative lengths converted into absolute lengths
Animation typea transform
Creates stacking contextyes

標準語法

transform = 
none | (en-US)
<transform-list>

<transform-list> =
<transform-function> (en-US)+ (en-US)

範例

平移、旋轉元素

HTML

html
<div>Transformed element</div>

CSS

css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

結果

更多範例

規範

Specification
CSS Transforms Module Level 2
# transform-functions
CSS Transforms Module Level 1
# transform-property

瀏覽器相容性

BCD tables only load in the browser

參見