CSS3中的變形處理——transform功能(旋轉、縮放、傾斜、移動)


在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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM