CSS3的过渡和转换
CSS3的過渡和轉換
1.過渡
什么是過渡呢？過渡通俗的來說就是從一個樣式到另一個樣式的逐漸轉換改變的效果。
過渡的屬性：
| 屬性 | 描述 | css |
| transition | 簡寫屬性，用于在一個屬性中設置4個過渡屬性 | 3 |
| transition-property | 規定應用過渡的css屬性的名稱 | 3 |
| transition-duration | 定義過渡效果所花費的時間。默認為0 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是“ease” | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0? | 3 |
?
?
?
?
?
transition:是一個簡寫屬性，用于設置四個過渡屬性，所以說我們用的時候只寫這個屬性就行了。
transition-property：規定應用過渡效果的屬性（可以設置單個屬性，也可以寫所有屬性（all））。請始終設置這個屬性，否則忽略這個屬性。（就像你想給你的心上人打電話，但是你不知道TA的手機號你能給他打電話嗎？）
transition-duration：規定完成效果所需要的時間（以秒或者毫秒來計算）。這個也是必須寫的屬性（假如沒有就不執行，因為默認值為 0 ）
transition-timing-function：規定過渡效果的速度曲線。默認是“ease”。他有6個字屬性：
linear 規定以相同的速度開始至結束的過渡效果。
ease 規定慢速開始，然后變快，然后慢速結束的過渡效果。
ease-in 規定以慢速開始的過渡效果
ease-out 規定以慢速結束的過渡效果
ease-in-out 規定以慢速開始和結束的過渡效果
cubic-bizier(n,n,n,n) 在cubic-bezier函數中定義自己的值。可能是值范圍為 0~1 之間
transition-delay:規定過渡效果從何時開始，即我們常說的延時。
效果：0.6s后開始執行過渡效果。
代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>過渡效果</title> 6 <style type="text/css"> 7 .square{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 transition: width 0.4s linear 0.6s;/*規定屬性width 0.4s 勻速 完成過渡效果 延時0.6s完成*/ 12 } 13 .square:hover{width: 300px;} 14 </style> 15 </head> 16 <body> 17 <div class="square"></div> 18 </body> 19 </html>2.轉換
轉換：向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動、或者傾斜。
屬性：
1.轉換
nooe 不進行轉換
matirx(n,n,n,n,n,n) 定義轉換，使用6個值的距陣
matirx3d(n,n,n,n,n,n,n,n,n,n,n,n) 定義3d轉換，使用16個4*4的矩陣
二維矩陣：matirx(n,n,n,n,n,n) ，就是基于水平方向和垂直方向重新定位元素
三維矩陣：matirx(n,n,n,n,n,n) ，就是基于 X，Y，Z 三個方向重新定位元素
此屬性涉及數學中的矩陣，我在這里這是點一下就好。?
2.移動
translate(x,y) 定義2d移動，即可向左右、上下移動
translate3d(x,y,z) 定義3d移動，x y z 3個方向轉動
translate(x,y) 平面移動，X為x軸方形移動，正為向右，負為向左。Y為y軸移動，正為向下，負為向上
translate3d(x,y,z) 同?translate(x,y)一樣只不過多了一個z軸移動
3.縮放
scale（x,y) 定義2d縮放
scale3d (x,y,z) ?定義3d縮放
4.旋轉
rotate(x,y) 定義2d旋轉
rotate3d(x,y,z) 定義3d旋轉
縮放和移動就很簡單了，大家從字面上就可以理解。
因為這個只是在給大家舉例子，所一說我就沒有加前綴，希望大家在寫的時候加上前綴。謝謝大家！！
?
總結
以上是生活随笔為你收集整理的CSS3的过渡和转换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML基础知识（常见元素、列表、链接元
- 下一篇： CSS布局技巧之——各种居中