transition

transition: <過渡屬性的名稱> <過渡時間> <過渡模式>
-webkit-transition: 谷歌瀏覽器和Safari瀏覽器
-moz-transition: 火狐瀏覽器
-o-transition: Opera瀏覽器

【語法】

-webkit-transition:color 1s;

//或者

-webkit-transition-property:color;      //參與過渡的屬性
-webkit-transition-duration:1s;         //過渡動畫持續時間
-webkit-transition
 
-timing-function:     //過渡動畫型別

ease            緩慢開始，緩慢結束
linear          勻速
ease-in         緩慢開始
ease-out        緩慢結束
ease-in-out     緩慢開始，緩慢結束（和ease有區別）

-webkit-transition-delay:               //物件延遲過渡時間

多個屬性的過渡效果：

方法一：

-webkit-transition:<屬性1> <時間1>,<屬性2> <時間2>.....

方法二：

-webkit-transition:<屬性1
 
> <時間1>;
-webkit-transition:<屬性2> <時間2>;

transform

transform 用於元素變形處理。

【屬性】：translate，rotate，scale，skew

translate

指定物件的2D translation(2D平移)。
第一個引數對應的是 X軸，第二個對應的為Y軸
例如：

    translate(10px,10px);
    // 右側為 X方向+
    // 下方為 Y方向+

rotate

指定物件的2D rotate（旋轉）,需要 transform-origin 屬性定義。

    Rotate(90deg),transform-origin:0 0;(不設定預設為center中心)

scale

指定元素的 2D scale（縮放）。
第一個對應X軸，第二個對應Y軸。
第二個未設定，預設為第一個引數的值。

    scale(0.5,0.5);

這裡寫程式碼片

#

3D場景

設定3D場景

-webkit-perspective： 800; 距離視窗的距離
-webkit-perspective-origin:50% 50%; 視點的位置
-webkit-transform-style:-webkit-preserve-3d;

使用 transform屬性調整元素：

• translate
  
  • translateX(x px)
  • translateY(y px)
  • translateZ(z px)
• rotate
  
  • rotateX(X deg)
  • rotateY(Y deg)
  • rotateZ(Z deg)