transform

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

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

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

語法

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
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.0, 3.0, 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: unset;

transform 屬性可能被指定為關鍵字值 none 或著一或多個 <transform-function> 值。

<transform-function>
可使用一個或多個 CSS transform functions。複合的transforms 會由左至右的順序來套用。
none
設定為沒有套用任何 transform。

可使用性問題

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

另外也可考慮使用prefers-reduced-motion (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

標準語法

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

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

where
<transform-function> = <matrix()> | (en-US) <translate()> | (en-US) <translateX()> | (en-US) <translateY()> | (en-US) <scale()> | (en-US) <scaleX()> | (en-US) <scaleY()> | (en-US) <rotate()> | (en-US) <skew()> | (en-US) <skewX()> | (en-US) <skewY()> | (en-US) <matrix3d()> | (en-US) <translate3d()> | (en-US) <translateZ()> | (en-US) <scale3d()> | (en-US) <scaleZ()> | (en-US) <rotate3d()> | (en-US) <rotateX()> | (en-US) <rotateY()> | (en-US) <rotateZ()> | (en-US) <perspective()>

where
<matrix()> = matrix( <number> (en-US)# (en-US){ (en-US)6} (en-US) )
<translate()> = translate( <length-percentage> , <length-percentage>? (en-US) )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> (en-US) , <number> (en-US)? (en-US) )
<scaleX()> = scaleX( <number> (en-US) )
<scaleY()> = scaleY( <number> (en-US) )
<rotate()> = rotate( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<skew()> = skew( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) , [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US)? (en-US) )
<skewX()> = skewX( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<skewY()> = skewY( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<matrix3d()> = matrix3d( <number> (en-US)# (en-US){ (en-US)16} (en-US) )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> (en-US) )
<translateZ()> = translateZ( <length> (en-US) )
<scale3d()> = scale3d( <number> (en-US) , <number> (en-US) , <number> (en-US) )
<scaleZ()> = scaleZ( <number> (en-US) )
<rotate3d()> = rotate3d( <number> (en-US) , <number> (en-US) , <number> (en-US) , [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<rotateX()> = rotateX( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<rotateY()> = rotateY( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<rotateZ()> = rotateZ( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US) )
<perspective()> = perspective( <length> (en-US) )

where
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)

範例

平移、旋轉元素

HTML

<p>Transformed element</p>

CSS

p {
  border: solid red;
  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}

結果

更多範例

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

規範

Specification Status Comment
CSS Transforms Level 2
The definition of 'transform' in that specification.
Editor's Draft Adds 3D transform functions.
CSS Transforms Level 1
The definition of 'transform' in that specification.
Working Draft Initial definition.

預設值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

瀏覽器相容性

BCD tables only load in the browser

參見