变换 | transform

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