CSS3 translate、transform、transition區別

translate:移動，

　　　　transform的一個方法

              經過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數：

          用法transform: translate(50px, 100px);

              -ms-transform: translate(50px,100px);

              -webkit-transform: translate(50px,100px);

              -o-transform: translate(50px,100px);

              -moz-transform: translate(50px,100px);

 

transform:變形。改變

                 CSS3中主要包括 旋轉：rotate() 順時針旋轉給定的角度，容許負值 rotate(30deg)

                   扭曲：skew() 元素翻轉給定的角度,根據給定的水平線（X 軸）和垂直線（Y 軸）參數：skew(30deg,20deg)

                   縮放：scale() 放大或縮小，根據給定的寬度（X 軸）和高度（Y 軸）參數： scale(2,4)

                   移動：translate() 平移，傳進 x,y值，表明沿x軸和y軸平移的距離

                   全部的2D轉換方法組合在一塊兒： matrix()  旋轉、縮放、移動以及傾斜元素

                   matrix(scale.x ,, , scale.y , translate.x, translate.y)      

   改變起點位置 transform-origin: bottom left;

   

   綜合起來使用：transform: 30deg 1.5 30deg 20deg 100px 200px;

 

transition: 容許CSS屬性值在必定的時間區間內平滑的過渡，

            須要事件的觸發，例如單擊、獲取焦點、失去焦點等

            transition:property duration timing-function delay;

                   property:CSS的屬性，例如：width height 爲none時中止全部的運動，能夠爲transform

           

                   duration:持續時間

                   timing-function:ease等

                   delay:延遲

                   注意：當property爲all的時候全部動畫

            例如：transition:width 2s ease 0s;

            http://www.w3cplus.com/content/css3-transition