在CSS3中,可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。
瀏覽器支持:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。
1.旋轉
分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉,在參數中加入角度值,角度值后面跟表示角度單位的deg文字即可,旋轉方向為順時針旋轉。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>旋轉</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #A4E786; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .rotate:nth-child(2):hover { 19 transform: rotate(45deg); 20 } 21 22 .rotate:nth-child(3):hover { 23 transform: rotateX(45deg); 24 } 25 26 .rotate:nth-child(4):hover { 27 transform: rotateY(45deg); 28 } 29 30 .rotate:nth-child(5):hover { 31 transform: rotateZ(45deg); 32 } 33 34 .rotate:nth-child(6):hover { 35 transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); 36 } 37 38 .rotate:nth-child(7):hover { 39 transform: scale(0.5) rotateY(45deg) rotateZ(45deg); 40 } 41 42 /* 在使用transform方法進行文字或圖像變形的時候,是以元素的中心點為基准點進行變形的。 */ 43 /* transform-origin屬性,可以改變變形的基准點。 */ 44 /* 基准點在元素水平方向上的位置屬性值:left、center、right */ 45 /* 基准點在元素垂直方向上的位置屬性值:top、center、bottom */ 46 .rotate:nth-child(8):hover { 47 transform: rotate(45deg); 48 transform-origin: left bottom; //把基准點修改為元素的左下角 49 } 50 51 /* 分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉,在參數中加入角度值,角度值后面跟表示角度單位的deg文字即可,旋轉方向為順時針旋轉。 */ 52 </style> 53 <body> 54 <div class="rotate">1</div> 55 <div class="rotate">2</div> 56 <div class="rotate">3</div> 57 <div class="rotate">4</div> 58 <div class="rotate">5</div> 59 <div class="rotate">6</div> 60 <div class="rotate">7</div> 61 <div class="rotate">8</div> 62 </body> 63 </html>
2.縮放
分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放,在參數中指定縮放倍率。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>縮放</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #B5FEFB; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .scale:nth-child(2):hover { 19 transform: scale(0.5); 20 } 21 22 .scale:nth-child(3):hover { 23 transform: scaleX(0.5); 24 } 25 26 .scale:nth-child(4):hover { 27 transform: scaleY(0.5); 28 } 29 30 .scale:nth-child(5):hover { 31 transform: scaleZ(0.5); 32 } 33 34 .scale:nth-child(6):hover { 35 transform: scaleX(0.5) scaleY(0.5); 36 } 37 38 .scale:nth-child(7):hover { 39 transform: scaleX(0.5) scaleY(0.5) rotateX(45deg); 40 } 41 42 /* 分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放,在參數中指定縮放倍率。 */ 43 </style> 44 <body> 45 <div class="scale">1</div> 46 <div class="scale">2</div> 47 <div class="scale">3</div> 48 <div class="scale">4</div> 49 <div class="scale">5</div> 50 <div class="scale">6</div> 51 <div class="scale">7</div> 52 </body> 53 </html>
3.傾斜
分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜(無skewZ方法),在參數中指定傾斜的角度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>傾斜</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #DF68C5; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .skew:nth-child(2):hover { 19 transform: skew(45deg); 20 } 21 22 .skew:nth-child(3):hover { 23 transform: skew(30deg, 30deg); 24 } 25 26 .skew:nth-child(4):hover { 27 transform: skewX(45deg); 28 } 29 30 .skew:nth-child(5):hover { 31 transform: skewY(45deg); 32 } 33 34 /* 分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜(無skewZ方法),在參數中指定傾斜的角度 */ 35 </style> 36 <body> 37 <div class="skew">1</div> 38 <div class="skew">2</div> 39 <div class="skew">3</div> 40 <div class="skew">4</div> 41 <div class="skew">5</div> 42 </body> 43 </html>
4.移動
分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動,在參數中加入移動距離。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>移動</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #DF68C5; 14 margin: 20px auto; 15 transition: all 1s ease-in-out; 16 } 17 18 .translate:nth-child(2):hover { 19 transform: translate(50px); 20 } 21 22 .translate:nth-child(3):hover { 23 transform: translate(50px, 50px); 24 } 25 26 .translate:nth-child(4):hover { 27 transform: translateX(50px); 28 } 29 30 .translate:nth-child(5):hover { 31 transform: translateY(50px); 32 } 33 34 .translate:nth-child(6):hover { 35 transform: translateZ(50px); 36 } 37 38 /* 分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動,在參數中加入移動距離。 */ 39 </style> 40 <body> 41 <div class="translate">1</div> 42 <div class="translate">2</div> 43 <div class="translate">3</div> 44 <div class="translate">4</div> 45 <div class="translate">5</div> 46 <div class="translate">6</div> 47 </body> 48 </html>
5.基准點(transform-origin)
沒有使用transform-origin改變元素基點位置的情況下,transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。
我們需要在不同的位置對元素進行這些操作,那么我們就可以使用transform-origin來對元素進行基點位置改變,使元素基點不在是中心位置,以達到你需要的基點位置。
transform-origin(X,Y):
用來設置元素的運動的基點(參照點)。默認點是元素的中心點。其中X和Y的值可以是百分值,em,px,其中X也可以是字符參數值left,center,right;Y和X一樣除了百分值外還可以設置字符值top,center,bottom,這個看上去有點像我們background-position設置一樣。
transform-origin並不是transform中的屬性值,跟其他的css3屬性一樣,需要在不同的瀏覽內核中加上相應的前綴。
6.多方法組合變形
同時使用多個轉換,綜合使用這幾個用法其格式為 transform: translate() rotate() scale();
變形的順序是從左到右依次進行,順序會影響到轉換的效果(先旋轉會改變坐標軸方向),順序可以隨意,不同的順序導致變形結果不同;
但我們同時有位置或者其他屬性的時候,個人習慣將位移放到最前面。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>多方法組合變形</title> 6 </head> 7 <style> 8 div:nth-child(1) { 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 background-color: #FFC0CB; 14 position: absolute; 15 transition: all 1s ease-in-out; 16 } 17 18 div:nth-child(1):hover, 19 div:nth-child(2) { 20 width: 100px; 21 height: 100px; 22 line-height: 100px; 23 text-align: center; 24 background-color: #DF68C5; 25 position: absolute; 26 transform: translate(100px, 100px) rotate(45deg) scale(0.5) skew(30deg, 30deg); 27 } 28 </style> 29 <body> 30 <div>變化前</div> 31 <div>變化后</div> 32 </body> 33 </html>