H5中的2D轉換和過渡

Html5中的2D轉換和過渡

（1）2D轉換

概念：就是元素在2D平面上實現移動，旋轉，縮放，斜切的操做就稱之爲2D轉換

語法：transform：值

值：移動，旋轉，縮放，斜切

（1.1）移動

transform：translate（）

參數說明：

（1）只有一個值的狀況下，表示水平方向運動，正值向右，負值向左，也能夠接受百分比，百分比參照的是自身的寬，高

（2）兩個值分別控制水平和垂直

（3）移動不會影響其餘的元素，相似於相對定位

（4）咱們能夠經過盒子的絕對定位配合transform：translate（-50%，-50%）實現一個沒有寬度高度的盒子水平垂直居中 ,若是沒有寬度的話，盒子最大的寬只能達到父盒子的一半

（5）若是想要單個的方向移動 能夠寫成 translateX（）和translateY（）

（1.2）旋轉

transform：rotate（）

參數說明：

（1）單位是deg  角度

（2）總體發生旋轉（包括裏面的內容）

（3）正值是順時針方向旋轉 負值反之

（4）中心點能夠控制

（1.3）控制中心點

transform-origin：值

值說明：

（1）值能夠是方位名詞，能夠是像素，也能夠是百分比（參照的是自身的寬高）

（1.4）縮放

transform：scale（）

參數說明：

（1）沒有單位，接受數值和小數

（2）只有一個值的狀況，總體縮放（等比例）

（3）兩個值的狀況，寬度和高度分別縮放（可能會變形）

（4）邊框也是會縮放的，而且若是想要一個方向縮放，另一個方向須要寫一個1

（5）縮放的中心點也能夠被控制

（1.5）斜切

transform：skew（）

參數說明：

（1）單位是deg

（2）只有一個值的狀況下，水平斜切

（3）兩個值的狀況下，水平垂直分別斜切

（4）斜切的中心點也能夠被控制 若是是X軸斜切 中心點控制上下 若是是Y軸斜切 中心點控制左右

總結：

（1）移動，斜切，放大都是能夠經過X或者Y去控制某一個方向

（2）中心點能夠控制旋轉，縮放，斜切

（3）若是咱們想要多個2D效果共存，須要採用連寫的方式

（4）當在不一樣場景出現須要transfrom的時候，須要複製前面已經存在的，防止覆蓋

（5）Transform的轉換效果順序儘可能保持統一，若是不統一會出現一些問題

（2）過渡

首先聲明，過渡不是動畫，是由css的一種狀態到另一種狀態中間變換的過程，咱們稱之爲過渡

transition：值

值說明：

（1）那個屬性須要過渡就寫什麼屬性 能夠用all來代替所有 （必寫）

（2）過渡持續的時間，單位能夠s或者是ms （必寫）
（3）過渡的曲線

（4）過渡從什麼時候開始

css3定義動畫新策略：css3的底層是c++，而JQ的animate是用定時器來完成的，因此說css3的運行效率會比animate高出不少，因此但凡是一些不是功能性的動畫，不須要保證兼容的時候，一概推薦你們用css3去實現，移動端的動畫都用過渡去實現（由於手機的硬件相對電腦來講性能差，因此用c3實現 效率更高）

小細節：display和漸變是不能直接產生過渡的 ...

：過渡的屬性最好寫全