CSS参考手册
变换 | Transforms
变换 | transform
该CSS transform
属性允许您修改CSS视觉格式模型的坐标空间。使用它,元素可以被翻译,旋转,缩放和倾斜。
/* 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, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
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;
如果该属性的值不是none
,则会创建一个堆叠上下文。在这种情况下,该对象将作为它包含的position: fixed
元素的包含块。
Initial value |
none |
---|---|
Applies to |
transformable elements |
Inherited |
no |
Percentages |
refer to the size of bounding box |
Media |
visual |
Computed value |
as specified, but with relative lengths converted into absolute lengths |
Animation type |
a transform |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
Creates stacking context |
yes |
语法
该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
<p>Transformed element</p>
CSS
p {
border: solid red;
transform: translate(100px) rotate(20deg);
transform-origin: 0 -250px;
}
结果
请看使用CSS变换和<transform-function>
想要更多的例子。
规范
Specification |
Status |
Comment |
---|---|---|
CSS Transforms Level 2The definition of 'transform' in that specification. |
Editor's Draft |
Adds 3D transform functions. |
CSS Transforms Level 1The definition of 'transform' in that specification. |
Working Draft |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
(Yes) -webkit 36 |
(Yes)-webkit (Yes) |
3.5 (1.9.1)-moz1 16.0 (16.0)2 |
9.0-ms3 10.0 |
10.5-o 12.10 15.0-webkit 23 |
3.1-webkit 9.0 |
3D Support |
12.0-webkit 36 |
(Yes) |
10.0-moz 16.0 (16.0) |
10.0 |
15.0-webkit 23 |
4.0-webkit 9.0 |
Feature |
Android |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support |
2.1-webkit4 |
(Yes)-webkit |
(Yes)-webkit (Yes) |
(Yes) |
(Yes) 11.0-webkit5 |
11.5-webkit |
3.2 (Yes)-webkit 9.0 |
3D Support |
3.0-webkit |
(Yes)-webkit |
(Yes) |
(Yes) |
(Yes) |
22-webkit |
3.2 (Yes)-webkit 9.0 |
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。