好程式設計師 web 前端技術之 CSS3 過渡

transition

css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值

transition-property：檢索或設定物件中的參與過渡的屬性
transition-duration：檢索或設定物件過渡的持續時間
transition-delay：檢索或設定物件延遲過渡的時間
transition-timing-function：檢索或設定物件中過渡的動畫型別

簡寫：
transition:all/具體屬性值運動時間s/ms 延遲時間s/ms 動畫型別

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

貝塞爾曲線：
屬性值： cubic-bezier()貝塞爾曲線網址：http://cubic-bezier.com/逐幀動畫：transition-timing-function:steps(動畫執行的步數);

CSS3 2D

transform

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey()

1、translate()

將元素向指定的方向移動，類似於 position中的relative。
水平移動： 向右移動 translate(tx,0)和向左移動translate(-tx,0)；
垂直移動： 向上移動 translate(0,-ty)和向下移動translate(0,ty);
對角移動： 右下角移動 translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

translateX()： 水平方向移動一個物件。對像只向 X軸進行移動，如果值為正值，對像向右移動；如果值為負值，對像向左移動。 translateY()： 縱軸方向移動一個物件。物件只向 Y軸進行移動，如果值為正值，物件向下移動；如果值為負值，對像向上移動。
這兩個函式和前面介紹的 translate()函式不同的是每個方法只接受一個值。
所以
transform:translate(-100px,0)實際上等於transform:translateX(-100px);
transform:translate(0,-100px)實際上等於transform:translateY(-100px)。

2、scale()

讓元素根據中心原點對物件進行縮放。預設的值 1。因此0.01到0.99之間的任何值，使一個元素縮小；而任何大於或等於1.01的值，讓元素顯得更大。
縮放 scale()函式和translate()函式的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值預設與第一個值相等。
例如，
scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。
scaleX()：相當於scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其預設值是1。
scaleY()：相當於scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其預設值是１。

3、rotate()

旋轉 rotate()函式透過指定的角度引數對元素根據物件原點指定一個2D旋轉。它主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。

rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉

rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉

4、skew()

傾斜 skew()函式能夠讓元素傾斜顯示。它可以將一個物件以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。
一個引數時：表示水平方向的傾斜角度；
兩個引數時：第一個參數列示水平方向的傾斜角度，第二個參數列示垂直方向的傾斜角度

transform-origin

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

因為我們元素預設基點就是其中心位置，換句話說我們沒有使用 transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。

2D 轉換元素能夠改變元素 x 和 y 軸

好程式設計師web前端技術之CSS3過渡