CSS3 transform 属性
说明
transform CSS 属性将变换应用于 2D 或 3D 空间中的元素，例如平移、旋转、缩放等。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | none |
|---|---|
| 适用于： | 可变形元素 |
| 继承： | No |
| 动画： | Yes. 参见动画属性。 |
| 版本： | New in CSS3 |
语法
属性的语法如下：
下面的示例显示了 transform 属性的作用。
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px); /* 标准语法 */
}属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
translate(tx,ty) |
将元素沿 X 和 Y 轴移动给定的量。 |
translate3d(tx,ty,tz) |
沿 X、Y&& Z 轴将元素移动给定的量。 |
translateX(tx) |
将元素沿 X 轴移动给定的量。 |
translateY(ty) |
沿 Y 轴将元素移动给定的量。 |
translateZ(tz) |
沿 Z 轴将元素移动给定的量。 |
rotate(a) |
按照 transform-origin 属性的定义，围绕元素的原点将元素旋转指定的角度。 |
rotate3d(x,y,z, a) |
围绕 [x,y,z] 方向向量将 3D 空间中的元素旋转最后一个参数中指定的角度。 |
rotateX(a) |
围绕 X 轴将元素旋转给定角度。 |
rotateY(a) |
围绕 Y 轴将元素旋转给定角度。 |
rotateZ(a) |
围绕 Z 轴将元素旋转给定的角度。 |
scale(sx,sy) |
按给定的量向上或向下缩放元素的宽度和高度。 函数 scale(1,1) 无效。 |
scale3d(sx,sy,sz) |
沿 X、Y 和 Z 轴按给定量缩放元素。 函数 scale3d(1,1,1) 无效。 |
scaleX(sx) |
沿 X 轴缩放元素。 |
scaleY(sy) |
沿 Y 轴缩放元素。 |
scaleZ(sz) |
沿 Z 轴缩放元素。 |
skew(ax,ay) |
沿 X 和 Y 轴以给定角度倾斜元素。 |
skewX(ax) |
沿 X 轴以给定角度倾斜元素。 |
skewY(ay) |
沿 Y 轴将元素倾斜给定角度。 |
matrix(n,n,n,n,n,n) |
以由六个值组成的变换矩阵的形式指定 2D 变换。 |
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
以 16 个值的 4×4 变换矩阵的形式指定 3D 变换。 |
perspective(length) |
定义 3D 变换元素的透视图。 一般来说，随着这个函数值的增加，元素会显得离观察者更远。 |
none |
指定不应应用任何变换。 |
initial |
将此属性设置为其默认值。 |
inherit |
如果指定，则关联元素采用其父元素 transform 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 transform 属性。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS3 2D 转换, CSS3 3D 转换
相关属性： backface-visibility, perspective, perspective-origin, transform-origin, transform-style.
Advertisements