CSS 2D 轉換

 

經過CSS 2D轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

2D轉換一共五個屬性:transfrom=>

translate(X軸數值px，Y軸數值px):元素從其當前位置移動，根據給定的x座標和y座標位置參數，將元素移動到新的位置

rotate(數值deg):元素順時針旋轉給定的角度，容許負值，元素將逆時針旋轉。

scale(寬度數值，高度數值):元素的尺寸會增長或減小，根據給定的寬度和高度參數。

skew(X數值deg，Y數值deg):元素翻轉給定的角度，根據給定的X軸和Y軸參數，將元素圍繞着X,Y軸翻轉。

matrix(n,n,n,n,n,n):能夠設定全部的數值，不建議使用，容易混亂。

CSS 3D轉換

3D轉換，將比2D轉換X,Y多出一個Z軸。

注：Opera 仍然不支持 3D 轉換（它只支持 2D 轉換）。

3D轉換相應的屬性=>

transfrom-origin:(X軸數值，Y軸數值)改變元素被轉換的位置，XY交叉部分定位被轉換的位置，元素將依照這個位置進行變化.

transfrom-style:規定被嵌套元素如何在3D空間中顯示。

perspective-origin:規定 3D 元素的底部位置。

perspective-visibility:定義元素在不面對屏幕時是否可見=>

（1）visible:默認，背面可見，相似透明。

（2）hidden:背面不可見。

過渡

經過添加過渡效果，咱們能夠把一個元素從一種樣式變成另一種樣式。

初始屬性{transition: 須要變化的位置（也能夠設置所有all） 時間}

注：若是不設定時長，則不會有過渡效果，由於默認值爲0。

初始屬性{(背景顏色、邊框大小等)+transition}=>初始屬性:hover{背景顏色、邊框大小等}

注：鼠標移除元素時，它會逐漸變回原樣。

過渡屬性

transition:簡寫屬性，用於在一個屬性中設置四個過渡屬性。

transition-property:規定應用過渡的 CSS 屬性的名稱。

transition-duration:定義過渡效果花費的時間。默認是 0。

transition-timing-function:規定過渡效果的時間曲線。默認是 "ease"=>

(1)ease:漸快、勻速、減速

(2)ease-in:漸快、勻速

(3)ease-out:勻速、減速

(4)ease-in-out:和ease相似，但比ease的加速增幅更大

(5)linear:全程勻速

transition-delay:規定過渡效果什麼時候開始。默認是 0,直接開始。

注：這些都將寫在初始元素中。

動畫

書寫方式：

@keyframes 名字{在必定時間的時候的樣式，用%後跟{要求}顯示}

@keyframes用於建立動畫

注：0%（或form）是動畫的開始，100%（或to） 是動畫的完成。

注2：@keyframes 名字，必須寫在要求元素前，否色無效。

@keyframes對應的元素中能夠設定的標籤=>

animation:全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性

animation-name:規定 @keyframes 動畫的名稱。

animation-duration:規定動畫完成一個週期所花費的秒或毫秒。默認是 0。

animation-timing-function:規定動畫的速度曲線。默認是 "ease"。

animation-delay:規定動畫什麼時候開始。默認是 0。

animation-iteration-count:規定動畫被播放的次數。默認是 1。

animation-direction:規定動畫是否在下一週期逆向地播放。默認是 "normal"。

animation-play-state:規定動畫是否正在運行或暫停。默認是 "running"。

animation-fill-mode:規定對象動畫時間以外的狀態。

光說估計你們也不懂，我發個例子吧

 

這樣就能用CSS作出來一個小小的動態效果。

中間一個大圓，周圍四個小圓環繞旋轉。

以上只是一個簡單的例子，你們能夠多多嘗試各類元素組合書寫。