这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
CSS中transform
属性允许你修改CSS可视化模型的坐标空间。通过transform,可以让元素进行移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。
如果该属性有一个非none值, 将会产生一个层叠上下文. 在这种情况下 对象将作为它包含的 position
: fixed 元素的
包含块(a containing block)。
初始值 | none |
---|---|
适用元素 | transformable elements |
是否是继承属性 | 否 |
Percentages | refer to the size of bounding box |
适用媒体 | visual |
计算值 | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
语法
/* 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: <transform-function> [<transform-function>]* | none
Vendor prefixes: 如果您需要使用此功能,请查看浏览器兼容性列表,获取各个浏览器供应商的前缀。
取值
- <transform-function>
- 至少一个 CSS transform functions 被应用, 请看下面的示例.
- none
- 指定为 不应用transform
示例
标准语法(Formal syntax)
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 Content
<p>Transformed element</p>
CSS Content
p {
border: solid red;
-webkit-transform: translate(100px) rotate(20deg);
-webkit-transform-origin: 0 -250px;
transform: translate(100px) rotate(20deg);
transform-origin: 0 -250px;
}
CSS transform函数
transform
属性允许在元素使用的坐标系统中使用transform函数到达变形的效果。下面描述了这些功能:
matrix(矩阵)
transform: matrix(a, c, b, d, tx, ty) /* a, b, c, d 创建了变形矩阵 ┌ ┐ │ a b │ │ c d │ └ ┘ tx, ty是变形的值 . */
指定二维矩阵中的6个值,和使用矩阵matrix [a b c d tx ty] 是等效的。
<length>
value for tx and ty.Webkit (Safari, Chrome) and Opera currently support a unitless
<number>
for tx and ty.在线示例
background: gold; width: 30em; -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); -ms-transform: matrix(1, -0.2, 0, 1, 0, 0); transform: matrix(1, -0.2, 0, 1, 0, 0);
background: wheat; max-width: intrinsic; -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); -o-transform: matrix(1, 0, 0.6, 1, 250, 0); -ms-transform: matrix(1, 0, 0.6, 1, 250, 0); transform: matrix(1, 0, 0.6, 1, 250, 0);
See also
- Examples of linear transformation matrices Wikipedia
- Coordinate transformation matrices mathamazement.com
- Microsoft's matrix filter MSDN
旋转
transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */
从原点(由 transform-origin
属性指定)开始安装顺时针方向旋转元素一个特定的角度。此操作对象的矩阵是 [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] 。
缩放
transform: scale(sx[, sy]); /* one or two unitless <number>s, e.g. scale(2.1,4) */
由[sx, sy]描述指定一个二维缩放操作。如果sy
未指定,默认认为和sx的值相同。
X方向缩放
transform: scaleX(sx); /* a unitless <number>, e.g. scaleX(2.7) */
使用向量[sx, 1] 完成在X方向上的缩放.
Y方向缩放
transform: scaleY(sy) /* a unitless <number>, e.g. scaleY(0.3) */
使用向量[1, sy] 完成在Y方向的缩放.
倾斜
transform: skew(ax[, ay]) /* one or two <angle>s, e.g. skew(30deg,-10deg) */
元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供,在Y轴上没有倾斜。
X方向倾斜
transform: skewX(angle) /* an <angle>, e.g. skewX(-30deg) */
绕X轴以指定的角度倾斜
Y方向倾斜
transform: skewY(angle) /* an <angle>, e.g. skewY(4deg) */
绕Y轴以指定的角度倾斜
平移
transform: translate(tx[, ty]) /* one or two <length> values */
Specifies a 2D translation by the vector [tx, ty]. If ty
isn't specified, its value is assumed to be zero.
用向量[tx, ty]完成2D平移。如果ty没有指定,它的值默认为0。
X方向平移
transform: translateX(tx) /* see <length> for possible values */
在X轴平移指定距离
Y方向平移
transform: translateY(ty) /* see <length> for possible values */
在Y轴平移指定距离
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 3.5 (1.9.1)-moz | yes -webkit | 9.0-ms | 10.5-o | 3.1-webkit |
3D Support | 10.0-moz | 12.0-webkit | 10.0-ms | no | 4.0-webkit |
Feature | iOS Safari | Opera Mini | Opera Mobile | Android Browser |
---|---|---|---|---|
Basic support | ? | ? | ? | ? |
提示
IE5或以上版本支持 Matrix Filter 属性完成相同的效果。
在IE9中,使用jQuery动态添加样式,不显示效果,其他浏览器显示正常。是因为IE9认为 -ms-transform是无效的脚本,不执行。请将 "-ms-transform"改为“msTransform”。
更多内容请查看下面链接:
说明
另见
transform-origin
- Using CSS transforms
- More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
- A cross-browser 2D transform plugin for jQuery