码农教程 - 一技在手,衣食无忧! tools

目录

CSS transform 属性

❮上一节 完整的CSS参考 下一节❯

示例

旋转、倾斜和缩放三个不同的 <div> 元素：

div.a {
  transform: rotate(20deg);
}

div.b {
  transform: skewY(20deg);
}

div.c {
  transform: scaleY(1.5);
}
亲自试一试 »

定义和用法

这个transform属性对元素应用 2D 或 3D 变换。此属性允许您旋转、缩放、移动、倾斜等元素。

展示演示❯

默认值： 没有任何
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS3
JavaScript 语法： 对象.style.transform="rotate(7deg)"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

语法

transform: none| transform-functions|initial|inherit;

属性值

Value Description Demo
none Defines that there should be no transformation Demo ❯
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values Demo ❯
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)		 Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation Demo ❯
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis
translateY(y) Defines a translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation Demo ❯
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis
scaleY(y) Defines a scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter Demo ❯
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis Demo ❯
rotateY(angle) Defines a 3D rotation along the Y-axis Demo ❯
rotateZ(angle) Defines a 3D rotation along the Z-axis
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis Demo ❯
skewX(angle) Defines a 2D skew transformation along the X-axis Demo ❯
skewY(angle) Defines a 2D skew transformation along the Y-axis Demo ❯
perspective(n) Defines a perspective view for a 3D transformed element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

图片扔在表格上
此示例演示如何创建 "polaroid" 张图片并旋转图片。

相关页面

CSS教程：CSS 2D 变换

CSS教程：CSS 3D 变换

HTML DOM 参考：变换属性


❮上一节 完整的CSS参考 下一节❯