CSS3-2D转换

本页目录：
怎么使用

• 平移函数translate()
• 旋转函数rotate()
• 缩放函数scale()
• 倾斜函数skew()
• 矩阵操作matrix()

浏览器支持

CSS3新增的2D变换属性： 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

怎么使用#

1. __translate()__：设置元素相对于当前的位置。
   语法： transform: translate(length,length);

   • 设置元素基于当前位置向右向下偏移。
   • length 偏离的距离数据。
     示例： transform: translate(50px,100px);
     

2. __rotate()__：将元素进行顺时针旋转，旋转中心transform-origin进行设置，默认为元素中心
   语法： transform: rotate(rot);

   • rot 元素顺时针转动的角度数据。
     示例： transform: rotate(30deg);
     

3. __scale()__：使用scale方法来实现文字或图像的缩放处理
   语法： transform: scale(times); 

   • times 数字，表示相对于当前元素缩放的倍数。可以有两个参数，表示长宽。
     示例： transform: scale(0.5, 2);
     

4. __skew()__：使用skew方法来实现文字或图像的倾斜处理，默认坐标中心在元素中心
   语法： transform: skew(rot);

   • 参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。第一个围绕X轴，第二个围绕Y轴
   • rot 一方向的倾斜角度。
     示例： transform: skew(30deg, 30deg);
     

5. __matrix()__：矩阵操作。matrix() 方法可以把所有 2D 转换方法组合在一起
   语法： transform: matrix(a,b,c,d,e,f);

   • 实际上，这6参数，对应的矩阵如下： 注意书写方向是竖着的
     
   • 进行运算：
     
     坐标就从[x,y]变成了[ax+cy+e,bx+dy+f]
   • 关于为什么要3*3的矩阵？
     主要是为了统一用矩阵乘的操作，其实平移只需要2*2，为了统一利用3*3乘法变相实现加法(平移)效果。具体思想参考计算机图形学
     示例： transform: matrix(1, 0, 0, 1, 30, 30);根据运算，可以得出此矩阵可以将元素向右下平移[30,30]

浏览器支持#

Chrome 和 Safari 需要前缀 -webkit-
Internet Explorer 9 需要前缀 -ms-