transform
CSS
property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS
visual formatting model
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
If the property has a value different than
none
，
stacking context
will be created. In that case, the element will act as a
包含块
for any
position: fixed;
or
position: absolute;
elements that it contains.
Only transformable elements can be
transform
ed. That is, all elements whose layout is governed by the CSS box model except for:
non-replaced inline boxes
,
table-column boxes
，和
table-column-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
property may be specified as either the keyword value
none
or as one or more
<transform-function>
values.
若
perspective()
is one of multiple function values, it must be listed first.
<transform-function>
none
Specifies that no transform should be applied.
Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide.
Also, consider making use of the
prefers-reduced-motion
media feature — use it to write a
media query
that will turn off animations if the user has reduced animation specified in their system preferences.
Find out more:
| 初始值 |
none
|
|---|---|
| 适用于 | transformable elements |
| 继承 | no |
| 百分比 | refer to the size of bounding box |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| 动画类型 | a transform |
| Creates stacking context | yes |
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>#{6} )
<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> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )where
<length-percentage> = <length> | <percentage>
<div>Transformed element</div>
div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
Please see
Using CSS transforms
and
<transform-function>
了解更多范例。
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Transforms Level 2
The definition of 'transform' in that specification. |
编者草案 | Adds 3D transform functions. |
|
CSS Transforms Level 1
The definition of 'transform' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
transform
|
Chrome 完整支持 36 | Edge 完整支持 12 |
Firefox
完整支持
16
|
IE
完整支持
10
注意事项
|
Opera
完整支持
23
|
Safari 完整支持 9 |
WebView Android
完整支持
37
|
Chrome Android 完整支持 36 |
Firefox Android
完整支持
16
|
Opera Android
完整支持
24
|
Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 3.0 |
| 3D support | Chrome 完整支持 12 | Edge 完整支持 12 | Firefox 完整支持 16 |
IE
完整支持
10
注意事项
|
Opera 完整支持 15 | Safari 完整支持 4 |
WebView Android
完整支持
3
Prefixed
|
Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 14 | Safari iOS 完整支持 3.2 | Samsung Internet Android 完整支持 1.0 |
完整支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
<transform-function>
data type with all the transform functions explained.