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先加速後減速

貝塞爾曲線網址：http://cubic-bezier.com/

複合式寫法：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

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