CSS3 2D 转换


CSS 2D 转换

CSS 转换(transforms)允许您移动、旋转、缩放和倾斜元素。

把鼠标悬停在下面的元素上,可以查看 2D 转换:

2D rotate

在本章中,您将学习如下 CSS 属性:

transform


浏览器支持

表格中的数字指注明了完全支持该属性的首个浏览器版本。

属性
transform36.010.016.09.023.0

CSS 2D 转换方法

通过使用 CSS transform 属性,您可以利用以下 2D 转换方法:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

提示:您将在下一章中学习 3D 转换。


translate() 方法

Translate

translate() 方法从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)。

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素,并向下移动 100 个像素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. -ms-transform: translate(50px,100px); /* IE 9 */
  11. transform: translate(50px,100px); /* 标准语法 */
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h1>translate() 方法</h1>
  17. <p>translate() 方法从元素当前位置对其进行移动:</p>
  18. <div>
  19. 该 div 元素从其当前位置向右移动 50 个像素,并向下移动 100 个像素。
  20. </div>
  21. </body>
  22. </html>

rotate() 方法

Rotate

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 <div> 元素顺时针旋转 20 度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv {
  12. -ms-transform: rotate(20deg); /* IE 9 */
  13. transform: rotate(20deg); /* 标准语法 */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>rotate() 方法</h1>
  19. <p>rotation() 方法顺时针或逆时针旋转元素。</p>
  20. <div>
  21. 这是一个普通的 div 元素。
  22. </div>
  23. <div id="myDiv">
  24. 这个 div 元素顺时针旋转 20 度。
  25. </div>
  26. </body>
  27. </html>

使用负值将逆时针旋转元素。

下面的例子把 <div> 元素逆时针旋转 20 度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv {
  12. -ms-transform: rotate(-20deg); /* IE 9 */
  13. transform: rotate(-20deg); /* 标准语法 */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>rotate() 方法</h1>
  19. <p>rotation() 方法顺时针或逆时针旋转元素。</p>
  20. <div>
  21. 这是一个普通的 div 元素。
  22. </div>
  23. <div id="myDiv">
  24. 这个 div 元素逆时针旋转 20 度。
  25. </div>
  26. </body>
  27. </html>

scale() 方法

Scale

scale() 方法增加或减少元素的大小(根据给定的宽度和高度参数)。

下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. margin: 150px;
  7. width: 200px;
  8. height: 100px;
  9. background-color: yellow;
  10. border: 1px solid black;
  11. -ms-transform: scale(2,3); /* IE 9 */
  12. transform: scale(2,3); /* 标准语法 */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>scale() 方法</h1>
  18. <p>scale() 方法增加或缩减元素的尺寸。</p>
  19. <div>
  20. 该 div 元素是其原始宽度的两倍,是其原始高度的三倍。
  21. </div>
  22. </body>
  23. </html>

下面的例子把 <div> 元素减小为其原始宽度和高度的一半:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. margin: 150px;
  7. width: 200px;
  8. height: 100px;
  9. background-color: yellow;
  10. border: 1px solid black;
  11. -ms-transform: scale(0.5,0.5); /* IE 9 */
  12. transform: scale(0.5,0.5); /* 标准语法 */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>scale() 方法</h1>
  18. <p>scale() 方法增加或缩减元素的尺寸。</p>
  19. <div>
  20. 该 div 元素减小到其原始宽度和高度的一半。
  21. </div>
  22. </body>
  23. </html>

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。

下面的例子把 <div> 元素增大为其原始宽度的两倍:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. margin: 150px;
  7. width: 200px;
  8. height: 100px;
  9. background-color: yellow;
  10. border: 1px solid black;
  11. -ms-transform: scaleX(2); /* IE 9 */
  12. transform: scaleX(2); /* 标准语法 */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>scaleX() 方法</h1>
  18. <p>scaleX() 方法增加或减少元素的宽度。</p>
  19. <div>
  20. 该 div 元素是其原始宽度的两倍。
  21. </div>
  22. </body>
  23. </html>

以下例子把 <div> 元素缩减为其原始宽度的一半:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. margin: 150px;
  7. width: 200px;
  8. height: 100px;
  9. background-color: yellow;
  10. border: 1px solid black;
  11. -ms-transform: scaleX(0.5); /* IE 9 */
  12. transform: scaleX(0.5); /* 标准语法 */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>scaleX() 方法</h1>
  18. <p>scaleX() 方法增加或减少元素的宽度。</p>
  19. <div>
  20. 该 div 元素是其原始宽度的一半。
  21. </div>
  22. </body>
  23. </html>

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把 <div> 元素增大到其原始高度的三倍:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. margin: 150px;
  7. width: 200px;
  8. height: 100px;
  9. background-color: yellow;
  10. border: 1px solid black;
  11. -ms-transform: scaleY(3); /* IE 9 */
  12. transform: scaleY(3); /* 标准语法 */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>scaleY() 方法</h1>
  18. <p>scaleY() 方法增加或减少元素的高度。</p>
  19. <div>
  20. 该 div 元素是其原始高度的三倍。
  21. </div>
  22. </body>
  23. </html>

下面的例子把 <div> 元素缩减为其原始高度的一半:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. margin: 150px;
  7. width: 200px;
  8. height: 100px;
  9. background-color: yellow;
  10. border: 1px solid black;
  11. -ms-transform: scaleY(0.5); /* IE 9 */
  12. transform: scaleY(0.5); /* 标准语法 */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>scaleY() 方法</h1>
  18. <p>scaleY() 方法增加或减少元素的高度。</p>
  19. <div>
  20. 该div元素是其原始高度的一半。
  21. </div>
  22. </body>
  23. </html>

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把 <div> 元素沿X轴倾斜 20 度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv {
  12. -ms-transform: skewX(20deg); /* IE 9 */
  13. transform: skewX(20deg); /* Standard syntax */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>skewX() 方法</h1>
  19. <p>skewX() 方法使元素沿 X 轴倾斜给定角度。</p>
  20. <div>
  21. 这是一个普通的 div 元素。
  22. </div>
  23. <div id="myDiv">
  24. 该 div 元素沿 X 轴倾斜 20 度。
  25. </div>
  26. </body>
  27. </html>

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 <div> 元素沿 Y 轴倾斜 20 度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv {
  12. -ms-transform: skewY(20deg); /* IE 9 */
  13. transform: skewY(20deg); /* 标准语法 */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>skewY() 方法</h1>
  19. <p>skewY() 方法使元素沿 Y 轴倾斜给定角度。</p>
  20. <div>
  21. 这是一个普通的 div 元素。
  22. </div>
  23. <div id="myDiv">
  24. 该 div 元素沿 Y 轴倾斜 20 度。
  25. </div>
  26. </body>
  27. </html>

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 <div> 元素沿 X 轴倾斜 20 度,同时沿 Y 轴倾斜 10 度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv {
  12. -ms-transform: skew(20deg,10deg); /* IE 9 */
  13. transform: skew(20deg,10deg); /* 标准语法 */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>skew() 方法</h1>
  19. <p>skew() 方法将元素倾斜到给定角度。</p>
  20. <div>
  21. 这是一个普通的 div 元素。
  22. </div>
  23. <div id="myDiv">
  24. 该 div 元素沿 X 轴倾斜 20 度,沿 Y 轴倾斜 10 度。
  25. </div>
  26. </body>
  27. </html>

如果未指定第二个参数,则值为零。因此,下例使 <div> 元素沿 X 轴倾斜 20 度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv {
  12. -ms-transform: skew(20deg); /* IE 9 */
  13. transform: skew(20deg); /* 标准语法 */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>skew() 方法</h1>
  19. <p>skew() 方法将元素倾斜到给定角度。</p>
  20. <div>
  21. 这是一个普通的 div 元素。
  22. </div>
  23. <div id="myDiv">
  24. 该 div 元素沿 X 轴倾斜 20 度。
  25. </div>
  26. </body>
  27. </html>

matrix() 方法

Rotate

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数,其中包括数学函数,这些参数使您可以旋转、缩放、移动(平移)和倾斜元素。

参数如下:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 100px;
  8. background-color: yellow;
  9. border: 1px solid black;
  10. }
  11. div#myDiv1 {
  12. -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
  13. transform: matrix(1, -0.3, 0, 1, 0, 0); /* 标准语法 */
  14. }
  15. div#myDiv2 {
  16. -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  17. transform: matrix(1, 0, 0.5, 1, 150, 0); /* 标准语法 */
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>matrix() 方法</h1>
  23. <p>matrix() 方法将所有 2D 转换方法组合为一个。</p>
  24. <div>
  25. 这是一个普通的 div 元素。
  26. </div>
  27. <div id="myDiv1">
  28. 使用 matrix() 方法。
  29. </div>
  30. <div id="myDiv2">
  31. matrix() 方法的另一种用法。
  32. </div>
  33. </body>
  34. </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 轴。

分类导航