CSS3過渡和2D屬性

. 一、過渡屬性

1. transition-property：檢索或設定物件中的參與過渡的屬性說明：屬性值可以單獨設定否個屬性，也可以設定多個屬性 width，height；還可以設定為all（預設值）代表所有屬性

2. transition-duration：檢索或設定物件過渡的持續時間說明：單位（s, ms） 1s = 1000ms

3. transition-delay：檢索或設定物件延遲過渡的時間說明：單位（s, ms）屬性值為正值的時候是延遲執行過渡效果，為負值的時候是提前只想過渡效果；

4. transition-timing-function：檢索或設定物件中過渡的動畫型別說明：

1：linear：勻速

2：ease（預設值）逐漸慢下來

3：ease-in加速

4：ease-out減速

5：ease-in-out先加速後減速

貝塞爾曲線**：

複合式寫法：transition:all 2s 1s linear ; transition: 2s linear 1s all

當使用複合式寫法的時候，過度時間和延遲時間的順序是不能互換的

. 二： 1、2d位移 translate()說明：translate(tx，ty) 第乙個值代表水平方向的距離，第二個值垂直方向的距

當屬性值為正值時代表的是向右或者向下移動，當為負值的時候代表向左或向上移動屬性值可以用px 也可以用%（百分比大小的參照物是元素的寬高），都是在當前位置進行位移的，對其元素的布局是沒有影響的，原來的位置的保留的。

2、2d縮放scale()

屬性值代表的是倍數，是不用加單位； 0――1 之間是縮小的效果，大於1的時候都是放大效果；預設值是 1；

scale( 值1，值2 ) ：值1：水平方向的縮放大小

值2 ：垂直方向屬性值可以設定為負值，但是很少用

屬性值的單位是度（deg）rotate() 沿著中心點旋轉；只能放乙個屬性值，正值：順時針旋轉；負值：逆時針旋轉；rotatex()

4、2d傾斜

skew()：屬性值的單位是度（deg）；屬性值為正值：向左或向上傾斜負值：向右或向下傾斜skew( 值1 )乙個值的時候代表沿x軸傾斜skew( 值1，值2) 值1：沿x軸的傾斜值2

元素通過transform進行變形時，都是對其他元素的布局不產生影響的。不脫離文件流。變形時元素預設情況下都是沿著元素的中心點去變形的當使用複合式寫法的時候，他們順訊不同，會導致結果不一樣，他們執行的順訊是從後向前解析的。

5、原點設定屬性

transform-origin定義：transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設定了transform屬性的時候起作用；說明：transform-origin：值1 值2 ；值1：水平值2：

垂直px % left top right bottom ;6、backface-visibility

：隱藏被旋轉的 div 元素的背面backface-visibility:visible;可見

（預設值）backface-visibility:hidden;不可見 backface-visibility 的bug

: 如果元素翻轉後結束後顯示在上一層，給他加乙個背景色就可以解決了。