CSS3转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果。
可以使用 2D 或 3D 转换来转换元素。

CSS3转换 - 图1

2D 转换

CSS3的2D转换属性使用transform属性，该属性有translate()、rotate()、scale()、skew()、matrix()五个方法，分别是移动、旋转、缩放、翻转、前四个方法的集合。

浏览器支持

  • Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • 注释：Internet Explorer 9 需要前缀 -ms-。

    translate(x, y)方法

    　　通过 translate(x, y) 方法，元素从其当前位置移动。根据给定的参数移动位置，此位置是相对于当前元素的位置移动。若当前元素占文档流（position: relative）时，translate(x, y)方法相当于top: x, left: y 的作用。此处于 top 和 left 属性不同的是当 x , y 为百分比时，translate的x, y 表示的是元素本身宽高的百分比，而top , left是父元素的百分比。
    1. <html>
    2. <head>
    3. <style> 
    4. div
    5. {
    6. width:100px;
    7. height:100px;
    8. background-color:yellow;
    9. border:1px solid black;
    10. display:inline-block;
    11. }
    12. div#div2
    13. {
    14.   transform:translate(50px,50px);
    15.   /*transform:translate(50%,50%); 两种写法效果一样，百分比是元素本身的宽高的百分比*/ 
    16. }
    17. </style>
    18. </head>
    19. <body>
    20.   <div>你好。这是一个 div 元素。</div>
    21.   <div id="div2">你好。这是一个 div 元素。</div>
    22.   <div> 这是第三个div</div>
    23. </body>
    24. </html>

rotate(angle) 方法

　　通过 rotate(angle) 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

  1. transform: rotate(666turn); 常见的用来旋转元素角度的 css，这里用到的是turn，1turn = 360°

默认是中心旋转，也可以使用tranform-origin 属性指定旋转中心。

  1. <html>
  2. <head>
  3. <style> 
  4. div
  5. {
  6.     width:100px;
  7.     height:75px;
  8.     background-color:yellow;
  9.     border:1px solid black;
  10. }
  11. div#div2
  12. {
  13.     transform:rotate(30deg); 
  14.     transform: rotate(666turn); /*旋转元素的角度，这里用到的是turn，1turn = 360°*/
  15.     transform-origin: top left; /* 以左上角为中心旋转*/
  16.     transform-origin: top right; /* 以右上角为中心旋转*/
  17.     transform-origin: bottom left; /* 以左下角为中心旋转*/
  18.     transform-origin: bottom right; /* 以右下角为中心旋转*/
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.     <div>你好。这是一个 div 元素。</div>
  24.     <div id="div2">你好。这是一个 div 元素。</div>
  25. </body>
  26. </html>

scale(x, y) 方法

　　通过 scale(x, y) 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数进行缩放
自带属性中，不支持改变缩放中心点，只能用js修改。x

skew(angle, angle)

　　通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

matrix() 方法

  • matrix() 方法把所有 2D 转换方法组合在一起。
  • matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>  
    5. div
    6. {
    7. width:100px;
    8. height:75px;
    9. background-color:yellow;
    10. border:1px solid black;
    11. }
    12. div#div2
    13. {
    14. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    15. -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    16. -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
    17. -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    18. -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
    19. }
    20. </style>
    21. </head>
    22. <body>
    23. <div>你好。这是一个 div 元素。</div>
    24. <div id="div2">你好。这是一个 div 元素。</div>
    25. </body>
    26. </html>

    新的转换属性

    下面的表格列出了所有的转换属性：
属性 描述 CSS支持版本
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3

2D Transform 方法

函数 描述
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 轴。

CSS3 3D 转换

浏览器支持

  • Internet Explorer 10 和 Firefox 支持 3D 转换。
  • Chrome 和 Safari 需要前缀 -webkit-。

  • Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

    3D 转换方法

  • rotateX()

  • rotateY()

    rotateX() 方法

    通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

    rotateY() 方法

    通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
    1. div
    2. {
    3. transform: rotateY(130deg);
    4. -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
    5. -moz-transform: rotateY(130deg);    /* Firefox */
    6. }

    rotateZ() 方法

    通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。

    转换属性

    下面的表格列出了所有的转换属性：
属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

3D Transform 方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。