We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

翻譯不完整。請協助 翻譯此英文文件

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

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

語法

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

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

標準語法

none | <transform-list>

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

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

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

where
<length-percentage> = <length> | <percentage>

範例

HTML

<p>Transformed element</p>

CSS

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

結果

請參考使用 CSS transforms 以及 <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
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea transform
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

瀏覽器相容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

36

Yes -webkit-

12 -webkit-

16

49 -webkit-

44 -webkit- 2

103

11 -webkit-

9 -ms- 4

12.1

15 -webkit-

10.5 — 15 -o-

9

3.1 -webkit-

3D support121210105154
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 -webkit- 1 Yes -webkit- Yes -webkit-

16

49 -webkit-

44 -webkit- 2

11.5 -webkit-

9

3.2 -webkit-

Yes
3D support3 -webkit- Yes Yes Yes223.2 Yes

1. Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Internet Explorer does not support the global values initial and unset.

4. Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

5. Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.

參見

文件標籤與貢獻者

最近更新: jackblackevo,