css3 transition过渡和 转换

过渡方法：常和伪元素搭配使用，比如，鼠标悬停停在div上时，div由一种样式转变成另一种样式。

必须指定要添加效果的CSS属性(eg:width、height等)
必须指定效果的持续时间。

 给div先设置基本样式 div{  width：100px;
      height:100px;
      background:red;
      transition：all  3s  linear 2s;
                  (过渡名称、花费的时间、曲线、延迟开始的时间)
     //有些事件，若只写这里而不给下面写的话，当过渡完成后，
     不会自动回到原来的div状态，所以我们也需要在上面给它添加过渡
     （然后hover不用）
需要做兼容处理的话再加-webkit-  /-o- / -ms- /  -moz- transition
 }
 div:hover{
      width:400px;
      height:400px;
      background:blue;    }

---

2D转换

变换方法有
transform+ translate()、rotate()、scale()、skew()、matrix()
注意[2d 3d 同]
Chrome 和 Safari 要求前缀 -webkit- 版本..
Internet Explorer 9 要求前缀 -ms- 版本…

---

1、translate（）方法， 【平移】
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); }

---

2、rotate()方法 【旋转】
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform: rotate(30deg);//rotate值（30deg）元素顺时针旋转30度。

---

3、scale()方法 【缩放】

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

transform: scale(2,3); 
/*  scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。*/

---

4、skew() 方法 【倾斜】

用法： transform:skew(< angle> [,< angle>]); //角度单位为deg
      transform: skew(30deg,20deg);  //元素在X轴和Y轴上倾斜20度30度

---

5、matrix() 方法 【方法合并】
matrix()方法和2D变换方法合并成一个。
matrix（） 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

---

函数 描述

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

---

3D
transform+以下方法

rotateX() 方法。围绕其在一个给定度数X轴旋转的元素。
rotateY()方法。围绕其在一个给定度数Y轴旋转的元素。

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

详见请点击跳转 3D转换属性