今天，我們一起來研究一下css3中的過渡模塊、2d轉換模塊和3d轉換模塊
一、過渡模塊transition
（一）過度模塊的三要素：
1、必須要有屬性發生變化
2、必須告訴系統哪個屬性需要執行過渡效果
3、必須告訴系統過渡效果持續時長
ps：當多個屬性需要同時執行過渡效果時用逗號隔開即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過渡模塊</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 50px; background-color: red; /*告訴系統哪個屬性需要執行過渡效果*/ transition-property: width, background-color; /*告訴系統過渡效果持續的時長*/ transition-duration: 5s, 5s; } /*
用來改變元素的屬性
:hover這個偽類選擇器除了可以用在a標簽上, 還可以用在其它的任何標簽上
*/ div:hover{ width: 300px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>
效果圖：
變化前
變化中
變化后
（二）過渡模塊的其它屬性：
1、告訴系統延遲多少秒之后才開始過渡動畫：transition-delay: 2s;
2、告訴系統過渡動畫的運動的速度：transition-timing-function: linear;
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>89-過渡模塊-其它屬性</title> <style> *{ margin: 0; padding: 0; } div { width: 100px; height: 50px; background-color: red; transition-property: width; transition-duration: 5s; /*告訴系統延遲多少秒之后才開始過渡動畫*/ transition-delay: 2s; } div:hover{ width: 300px; } ul{ width: 800px; height: 500px; margin: 0 auto; background-color: pink; border: 1px solid #000; } ul li{ list-style: none; width: 100px; height: 50px; margin-top: 50px; background-color: blue; transition-property: margin-left; transition-duration: 10s; } ul:hover li{ margin-left: 700px; } ul li:nth-child(1){ /*告訴系統過渡動畫的運動的速度*/ transition-timing-function: linear; } ul li:nth-child(2){ transition-timing-function: ease; } ul li:nth-child(3){ transition-timing-function: ease-in; } ul li:nth-child(4){ transition-timing-function: ease-out; } ul li:nth-child(5){ transition-timing-function: ease-in-out; } </style> </head> <body> <!--<div></div>--> <ul> <li>linear</li> <li>ease</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> </body> </html>
不同的運動速度會導致不同的過渡效果，請看運行效果圖：
運動前
運動中
運動后
（三）過渡連寫格式
transition: 過渡屬性 過渡時長 運動速度 延遲時間;
過渡連寫注意點
1和分開寫一樣, 如果想給多個屬性添加過渡效果也是用逗號隔開即可
2連寫的時可以省略后面的兩個參數, 因為只要編寫了前面的兩個參數就已經滿足了過渡的三要素
3如果多個屬性運動的速度/延遲的時間/持續時間都一樣, 那么可以簡寫為：transition:all 0s;
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過渡模塊的連寫</title> <style> *{ margin: 0; padding: 0; } div { width: 100px; height: 50px; background-color: red; /*注釋中為簡寫前的代碼： transition-property: width; ransition-duration: 5s; transition: width 5s linear 0s,background-color 5s linear 0s; transition: background-color 5s linear 0s; transition: width 5s,background-color 5s,height 5s;*/ /*下面為簡寫后的代碼*/ transition: all 5s; } div:hover{ width: 300px; height: 300px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>
（四）過度模塊的編寫套路和案例
編寫套路：
1、不要管過渡, 先編寫基本界面
2、修改我們認為需要修改的屬性
3、再回過頭去給被修改屬性的那個元素添加過渡即可
案例1：
思路：
1、先做好基本頁面布局，給div和span添加樣式表；
2、考慮怎么實現要做的效果，和需要變動的屬性
3、給屬性添加過渡效果，在只有一種屬性變動或多個屬性過渡時間等相同的情況下推薦使用：transition:all 1s;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過渡模塊-彈性效果</title> <style> *{ margin: 0; padding: 0; } div{ height: 150px; background-color: green; margin-top: 100px; text-align: center; line-height: 150px; } div span{ font-size: 80px; transition: margin 3s; } div:hover span{ margin: 0 20px; } </style> </head> <body> <div> <span>L</span> <span>M</span> <span>S</span> <span>碼</span> <span>農</span> <span>來</span> <span>過</span> <span>渡</span> </div> </body> </html>
示例圖片：
過渡前
過渡中
過度后
案例2：
手風琴效果，示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過渡模塊-手風琴效果</title> <style> *{ margin: 0; padding: 0; } ul{ width: 960px; height: 300px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } ul li{ list-style: none; width: 160px; height: 300px; float: left; transition: width 0.5s; } ul:hover li{ width: 100px; } ul li:hover{ width: 460px; } </style> </head> <body> <ul>
/*這里為了方便使用了行內樣式表，實際應用中一般為圖片，要注意樣式與內容分離*/
<li style="background-color: #ccc;"></li> <li style="background-color: #e5ce8a;"></li> <li style="background-color: #eac123;"></li> <li style="background-color: #a00;"></li> <li style="background-color: #cc0;"></li> <li style="background-color: #0cc;"></li> </ul> </body> </html>
思路：
1、通過浮動做好基本布局，如圖：
2、考慮需要實現的效果，如下圖，即鼠標移入后，具有:hover事件的li寬度變大，其余的等大。
我們可以通過ul的:hover事件讓所有的li變小，然后通過li的:hover時間來使當前li寬度變大。案例事小，思路是大，這種思路在以后的js中或者其他的地方經常用到，即先將所有元素初始化，在單獨改變需要改變的元素屬性。
二、2d轉換模塊transform
（一）寫法：transform:值;transform的值常用的有3種：
1、旋轉：其中deg是單位, 代表多少度：transform: rotate(45deg);
2、移動：第一個參數:水平方向，第二個參數:垂直方向，transform: translate(100px, 0px);
3、縮放：第一個參數:水平方向，第二個參數:垂直方向，transform: scale(0.5, 0.5);transform: scale(1.5);
注意點:
如果取值是1, 代表不變
如果取值大於1, 代表需要放大
如果取值小於1, 代表需要縮小
如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數
ps：1、如果需要進行多個轉換, 那么用空格隔開
2、2D的轉換模塊會修改元素的坐標系, 所以旋轉之后再平移就不是水平平移的
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D轉換模塊</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px; height: 500px; border: 1px solid #000; margin: 0 auto; } ul li{ list-style: none; width: 100px; height: 50px; background-color: red; margin: 0 auto; margin-top: 50px; text-align: center; line-height: 50px; } ul li:nth-child(2){ transform: rotate(45deg); } ul li:nth-child(3){ transform: translate(100px, 0px); } ul li:nth-child(4){ transform: scale(1.5); } ul li:nth-child(5){ transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5); /*transform: translate(100px, 0px);*/ } </style> </head> <body> <ul> <li>正常的</li> <li>旋轉的</li> <li>平移的</li> <li>縮放的</li> <li>綜合的</li> </ul> </body> </html>
示例圖片：
（二）轉換模塊的形變中心點：
默認情況下所有的元素都是以自己的中心點作為參考來旋轉的, 我們可以通過形變中心點屬性來修改它的參考點。
1、寫法：transform-origin: left top;第一個參數:水平方向，第二個參數:垂直方向。
ps：取值有三種形式
具體像素：transform-origin: 200px 0px;
百分比：transform-origin: 50% 50%;
特殊關鍵字：transform-origin: center center;
2、示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D轉換模塊的形變中心點</title> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; border: 1px solid #000; margin: 100px auto; position: relative; } ul li{ list-style: none; width: 200px; height: 200px; position: absolute; left: 0; top: 0; transform-origin: left top; } ul li:nth-child(1){ background-color: red; transform: rotate(30deg); } ul li:nth-child(2){ background-color: green; transform: rotate(50deg); } ul li:nth-child(3){ background-color: blue; transform: rotate(70deg); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
（三）2d轉換模塊的旋轉軸
rotate旋轉屬性旋轉是默認都是圍繞z軸旋轉，若需要改變旋轉軸可以在rotate后加上旋轉軸，即：rotateX();rotateY();rotateZ();
1、當圍繞x和y軸旋轉時就會改變屬性距離我們的距離，也就是透視，什么事透視呢，就是近大遠小。
2、你會發現元素圍繞x軸或y軸旋轉時並沒有金達遠小的效果，這時你需要添加一個透視屬性：perspective: 500px;注意：這個屬性需要添加在元素的父容器上；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋轉軸向</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px; height: 500px; margin: 0 auto; } ul li{ list-style: none; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border: 1px solid #000; transform:perspective(500px);
} ul li div{ width: 200px; height: 200px; background-color: #ac4345; } ul li:nth-child(1) div{ transform: rotateZ(45deg); } ul li:nth-child(2) div{ transform: rotateX(45deg); } ul li:nth-child(3) div{ transform: rotateY(45deg); } </style> </head> <body> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> </body> </html>
示例圖片：
今天的分享到這里就結束了，希望大家能有一些收獲。大家有什么意見和建議也可以在留言區留言，謝謝大家的支持。