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;
}

結果

更多範例

請參考使用 CSS transform (en-US) 以及 <transform-function> (en-US) 的更多範例。

規範

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

瀏覽器相容性

BCD tables only load in the browser

參見