transform，translate，transition 的區別

 一.

        transform是變形，css 2D轉換，包含如下幾種方法：旋轉rotate，扭曲skew，縮放scale，移動translate和矩陣變形matrix。

        translate():根據x、y軸位置給定的參數，從當前元素位置移動

div
{
 　　transform: translate(50px,100px);
　　-ms-transform: translate(50px,100px); /* IE 9 */
　　-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

        rotate()：在一個給定度數順時針旋轉的元素。負值是容許的，這樣是元素逆時針旋轉。

div
{
　　transform: rotate(30deg);
　　-ms-transform: rotate(30deg); /* IE 9 */
　　-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

        scale()：該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數：scale（2,4）轉變寬度爲原來的大小的2倍，和其原始大小4倍的高度。

        skew()：該元素會根據橫向（X軸）和垂直（Y軸）線參數給定角度：skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。

        matrix()：和2D變換方法合併成一個。

        matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。          

div

{
　　transform:matrix(0.866,0.5,-0.5,0.866,0,0);
　　-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
　　-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

• 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；

• 3D旋轉：CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；

• 3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；

• 3D矩陣：CSS3中3D變形中和2D變形同樣也有一個3D矩陣功能函數matrix3d()。

   

 二.

        transition:css3過渡；

        用法：div{ transition:要添加效果的屬性   指定效果的持續時間 }

　　要添加多個樣式的變換效果，添加的屬性由逗號分隔：

div
{
　　transition: width 2s, height 2s, transform 2s;
　　-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

        栗子（典型的例子是結合hover屬性）：

div{　　width:100px;　　height:100px;　　background:red;　　transition:width 1s linear 2s;　　/* Safari */　　-webkit-transition:width 1s linear 2s;}div:hover{　　width:200px;}