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。

語法

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>

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

none

設定為沒有套用任何 transform。

可使用性問題

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

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

瞭解更多:

正式定義

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

標準語法

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+

範例

平移、旋轉元素

HTML

html
<div>Transformed element</div>

CSS

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

參見