手册
目录
CSS 转换(transforms)允许您移动、旋转、缩放和倾斜元素。
把鼠标悬停在下面的元素上,可以查看 2D 转换:
2D rotate在本章中,您将学习如下 CSS 属性:
transform表格中的数字指注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera | 
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 | 
通过使用 CSS transform 属性,您可以利用以下 2D 转换方法:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()提示:您将在下一章中学习 3D 转换。
translate() 方法从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)。
下面的例子把
div {
  transform: translate(50px, 100px);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
下面的例子把
div {
  transform: rotate(20deg);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用负值将逆时针旋转元素。
下面的例子把
div {
  transform: rotate(-20deg);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
scale() 方法增加或减少元素的大小(根据给定的宽度和高度参数)。
下面的例子把
div {
  transform: scale(2, 3);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下面的例子把
div {
  transform: scale(0.5, 0.5);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
scaleX() 方法增加或减少元素的宽度。
下面的例子把
div {
  transform: scaleX(2);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
以下例子把
div {
  transform: scaleX(0.5);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
scaleY() 方法增加或减少元素的高度。
下面的例子把
div {
  transform: scaleY(3);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下面的例子把
div {
  transform: scaleY(0.5);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
skewX() 方法使元素沿 X 轴倾斜给定角度。
下例把
div {
  transform: skewX(20deg);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
skewY() 方法使元素沿 Y 轴倾斜给定角度。
下例把
div {
  transform: skewY(20deg);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。
下面的例子使
div {
  transform: skew(20deg, 10deg);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
如果未指定第二个参数,则值为零。因此,下例使
div {
  transform: skew(20deg);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数,其中包括数学函数,这些参数使您可以旋转、缩放、移动(平移)和倾斜元素。
参数如下:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下表列出了所有 2D 变换属性:
| 属性 | 描述 | 
|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 
| transform-origin | 允许你改变被转换元素的位置。 | 
| 函数 | 描述 | 
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 | 
| translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 | 
| translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 | 
| translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 | 
| scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 | 
| scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 | 
| scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 | 
| rotate(angle) | 定义 2D 旋转,在参数中规定角度。 | 
| skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 | 
| skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 | 
| skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 | 
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
							
							共5课时
17.2万人学习
							
							共49课时
77万人学习
							
							共29课时
61.7万人学习
							
							共25课时
39.3万人学习
							
							共43课时
70.9万人学习
							
							共25课时
61.6万人学习
							
							共22课时
23万人学习
							
							共28课时
33.9万人学习
							
							共89课时
125万人学习