CSS3 2D 转换
CSS 2D 转换
CSS 转换(transforms)允许您移动、旋转、缩放和倾斜元素。
把鼠标悬停在下面的元素上,可以查看 2D 转换:
在本章中,您将学习如下 CSS 属性:
transform
浏览器支持
表格中的数字指注明了完全支持该属性的首个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 2D 转换方法
通过使用 CSS transform
属性,您可以利用以下 2D 转换方法:
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
提示:您将在下一章中学习 3D 转换。
translate() 方法
translate()
方法从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)。
下面的例子把 <div> 元素从其当前位置向右移动 50 个像素,并向下移动 100 个像素:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: translate(50px,100px); /* IE 9 */
transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动:</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素,并向下移动 100 个像素。
</div>
</body>
</html>
rotate() 方法
rotate()
方法根据给定的角度顺时针或逆时针旋转元素。
下面的例子把 <div> 元素顺时针旋转 20 度:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(20deg); /* IE 9 */
transform: rotate(20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>rotate() 方法</h1>
<p>rotation() 方法顺时针或逆时针旋转元素。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
这个 div 元素顺时针旋转 20 度。
</div>
</body>
</html>
使用负值将逆时针旋转元素。
下面的例子把 <div> 元素逆时针旋转 20 度:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(-20deg); /* IE 9 */
transform: rotate(-20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>rotate() 方法</h1>
<p>rotation() 方法顺时针或逆时针旋转元素。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
这个 div 元素逆时针旋转 20 度。
</div>
</body>
</html>
scale() 方法
scale()
方法增加或减少元素的大小(根据给定的宽度和高度参数)。
下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
transform: scale(2,3); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scale() 方法</h1>
<p>scale() 方法增加或缩减元素的尺寸。</p>
<div>
该 div 元素是其原始宽度的两倍,是其原始高度的三倍。
</div>
</body>
</html>
下面的例子把 <div> 元素减小为其原始宽度和高度的一半:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scale(0.5,0.5); /* IE 9 */
transform: scale(0.5,0.5); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scale() 方法</h1>
<p>scale() 方法增加或缩减元素的尺寸。</p>
<div>
该 div 元素减小到其原始宽度和高度的一半。
</div>
</body>
</html>
scaleX() 方法
scaleX()
方法增加或减少元素的宽度。
下面的例子把 <div> 元素增大为其原始宽度的两倍:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleX(2); /* IE 9 */
transform: scaleX(2); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scaleX() 方法</h1>
<p>scaleX() 方法增加或减少元素的宽度。</p>
<div>
该 div 元素是其原始宽度的两倍。
</div>
</body>
</html>
以下例子把 <div> 元素缩减为其原始宽度的一半:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleX(0.5); /* IE 9 */
transform: scaleX(0.5); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scaleX() 方法</h1>
<p>scaleX() 方法增加或减少元素的宽度。</p>
<div>
该 div 元素是其原始宽度的一半。
</div>
</body>
</html>
scaleY() 方法
scaleY()
方法增加或减少元素的高度。
下面的例子把 <div> 元素增大到其原始高度的三倍:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleY(3); /* IE 9 */
transform: scaleY(3); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scaleY() 方法</h1>
<p>scaleY() 方法增加或减少元素的高度。</p>
<div>
该 div 元素是其原始高度的三倍。
</div>
</body>
</html>
下面的例子把 <div> 元素缩减为其原始高度的一半:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleY(0.5); /* IE 9 */
transform: scaleY(0.5); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scaleY() 方法</h1>
<p>scaleY() 方法增加或减少元素的高度。</p>
<div>
该div元素是其原始高度的一半。
</div>
</body>
</html>
skewX() 方法
skewX()
方法使元素沿 X 轴倾斜给定角度。
下例把 <div> 元素沿X轴倾斜 20 度:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewX(20deg); /* IE 9 */
transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>skewX() 方法</h1>
<p>skewX() 方法使元素沿 X 轴倾斜给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度。
</div>
</body>
</html>
skewY() 方法
skewY()
方法使元素沿 Y 轴倾斜给定角度。
下例把 <div> 元素沿 Y 轴倾斜 20 度:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>skewY() 方法</h1>
<p>skewY() 方法使元素沿 Y 轴倾斜给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 Y 轴倾斜 20 度。
</div>
</body>
</html>
skew() 方法
skew()
方法使元素沿 X 和 Y 轴倾斜给定角度。
下面的例子使 <div> 元素沿 X 轴倾斜 20 度,同时沿 Y 轴倾斜 10 度:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skew(20deg,10deg); /* IE 9 */
transform: skew(20deg,10deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>skew() 方法</h1>
<p>skew() 方法将元素倾斜到给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度,沿 Y 轴倾斜 10 度。
</div>
</body>
</html>
如果未指定第二个参数,则值为零。因此,下例使 <div> 元素沿 X 轴倾斜 20 度:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skew(20deg); /* IE 9 */
transform: skew(20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>skew() 方法</h1>
<p>skew() 方法将元素倾斜到给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度。
</div>
</body>
</html>
matrix() 方法
matrix()
方法把所有 2D 变换方法组合为一个。
matrix()
方法可接受六个参数,其中包括数学函数,这些参数使您可以旋转、缩放、移动(平移)和倾斜元素。
参数如下:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
实例
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv1 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* 标准语法 */
}
div#myDiv2 {
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
transform: matrix(1, 0, 0.5, 1, 150, 0); /* 标准语法 */
}
</style>
</head>
<body>
<h1>matrix() 方法</h1>
<p>matrix() 方法将所有 2D 转换方法组合为一个。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv1">
使用 matrix() 方法。
</div>
<div id="myDiv2">
matrix() 方法的另一种用法。
</div>
</body>
</html>
CSS 转换属性
下表列出了所有 2D 变换属性:
属性 | 描述 |
---|---|
transform | 向元素应用 2D 或 3D 转换。 |
transform-origin | 允许你改变被转换元素的位置。 |
CSS 2D 转换方法
函数 | 描述 |
---|---|
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 轴。 |