CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

只能转换由盒子模型定位的元素。根据经验,如果元素具有display: block,则由盒模型定位元素。

语法

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

transform属性可以指定为关键字值none 或一个或多个<transform-function>值。

<transform-function>
要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘,这意味着复合变换按从右到左的顺序有效地应用。
none
不应用任何变换。

语法格式

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

<div>Transformed element</div>

CSS

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

结果

有关更多示例,请参阅使用CSS变换<transform-function>

规范

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

初始值none
适用元素transformable elements
是否是继承属性
Percentagesrefer to the size of bounding box
适用媒体visual
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea transform
正规顺序the unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 36
Full support 36
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled 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.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer does not support the global values initial and unset.
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 9
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 10.5 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 9
Full support 9
Full support 3.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 2
Prefixed Notes
Full support 2
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled 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.
Opera Android Full support 11.5
Prefixed
Full support 11.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9
Full support 9
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
3D supportChrome Full support 12Edge Full support 12Firefox Full support 10IE Full support 10
Notes
Full support 10
Notes
Notes 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.
Opera Full support 15Safari Full support 4WebView Android Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support 22Safari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见

文档标签和贡献者

最后编辑者: zhuangyin,