當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3中的transform变形

發布時間：2025/6/15 CSS 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3中的transform变形小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　在CSS3中，用Transform功能可以實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實現。將這四種變形結合使用，就會產生不同的效果，使用順序不同，產生的效果是不一樣的。

　　目前瀏覽器支持情況：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

　　一、旋轉：

　　CSS中使用rotate方法來實現對元素的旋轉，在參數中加入角度值，旋轉方式為順時針旋轉。

　　例一：一個黃色的div元素，通過在樣式代碼中使用“transform: rotate(45deg)”，語句使這個div元素順時針旋轉45度。deg是CSS3的“Values and Units”模塊中定義的一個角度單位。

　　代碼清單1：

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform旋轉</title>
6 <style>
7 div {
8 width: 300px;
9 margin: 150px auto;
10 background-color: yellow;
11 text-align: center;
12 -webkit-transform: rotate(45deg); /* for Chrome || Safari */
13 -moz-transform: rotate(45deg); /* for Firefox */
14 -ms-transform: rotate(45deg); /* for IE */
15 -o-transform: rotate(45deg); /* for Opera */
16 }
17 </style>
18 </head>
19 <body>
20 <div>黃色div</div>
21 </body>
22 </html>

運行結果（Chrome 14）:

　　二、縮放：

　　scale方法實現文字或圖像的縮放效果，參數中指定縮放倍率，例如：“scale(0.5)”表示縮小50%，參數可以是整數，也可以是小數。

　　例二：將一個div元素縮小50%

　　代碼清單2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform縮放</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: scale(0.5); /* for Chrome || Safari */
-moz-transform: scale(0.5); /* for Firefox */
-ms-transform: scale(0.5); /* for IE */
-o-transform: scale(0.5); /* for Opera */
}
</style>
</head>
<body>
<div>黃色div</div>
</body>
</html>

運行結果（Chrome 14）:

　　三、傾斜：

　　使用skew方法來實現文字或圖像的傾斜效果，在參數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。例如“skew(30deg, 30deg)”表示水平方向上傾斜30度，垂直方向上也傾斜30度，

　　例三：將一個div元素在水平方向上傾斜30度，垂直方向上傾斜30度。

　　代碼清單3：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform傾斜</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: skew(30deg, 30deg); /* for Chrome || Safari */
-moz-transform: skew(30deg, 30deg); /* for Firefox */
-ms-transform: skew(30deg, 30deg); /* for IE */
-o-transform: skew(30deg, 30deg); /* for Opera */
}
</style>
</head>
<body>
<div>黃色div</div>
</body>
</html>

運行結果（Chrome 14）:

注意：skew方法中的兩個參數可以修改成只使用一個參數，省略另一個參數，這可不是說水平方向和垂直方向一樣，這種情況視為只在水平方向傾斜，垂直方向上不傾斜。

看一下運行結果：

　　四、移動：

　　使用translate方法來實現將文字或圖像進行移動，在參數中分別指定水平方向上的移動距離與垂直方向上的移動距離。例如“translate(50px, 50px)”表示水平方向上移動50個像素，垂直方向上移動50個像素。

　　例四：將一個div元素水平方向上移動50個像素，垂直方向上移動50個像素。

　　代碼清單4：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform移動</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: translate(50px, 50px); /* for Chrome || Safari */
-moz-transform: translate(50px, 50px); /* for Firefox */
-ms-transform: translate(50px, 50px); /* for IE */
-o-transform: translate(50px, 50px); /* for Opera */
}
</style>
</head>
<body>
<div>黃色div</div>
</body>
</html>

運行結果（Firefox 7）:

注意：translate方法中的兩個參數也可以修改成只使用一個參數，跟skew方法類似，省略另一個參數，這種情況視為只在水平方向移動，垂直方向上不移動。

運行結果(Firefox 7)：

　　對一個元素使用多種變形的方法：

　　例五：對一個div元素，先移動(向右移動150px，向下移動200px)，然后旋轉(順時針旋轉45度)，最后縮放(放大1.5倍)。

　　代碼清單5:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform多重變形（先移動，然后旋轉，最后縮放）</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for Chrome || Safari */
-moz-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for Firefox */
-ms-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for IE */
-o-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for Opera */
}
</style>
</head>
<body>
<div>黃色div</div>
</body>
</html>

運行結果（Chrome 14）：

　　下面把上面代碼中幾個變形方法的順序調整一下，先旋轉(順時針旋轉45度)，然后縮放(放大1.5倍)，移動(向右移動150px，向下移動200px),?看看結果怎樣：

　　代碼清單6：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform多重變形（先旋轉，然后縮放，最后移動）</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for Chrome || Safari */
-moz-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for Firefox */
-ms-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for IE */
-o-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for Opera */
}
</style>
</head>
<body>
<div>黃色div</div>
</body>
</html>

運行結果（Chrome 14）:

　　通過上面兩個示例可以看出，元素在兩個頁面上所處位置并不相同，為什么會這樣呢？

先看第一個例子：首先向右移動150px，向下移動200px，元素的中心點在水平方向先移動150px，再在垂直方向向下移動200px，然后在旋轉45度，放大1.5倍。

第二個例子：首先旋轉45度，并且放大了1.5倍，這時候元素是傾斜了45度角的，在移動的話，元素就是按45度角的方向向右移動150px，向下移動200px是沿著與水平方向呈225度方向移動的。看下下面的示意圖就很明顯了：

怎么樣，很容易看明白吧。

　　指定變形的基準點：

　　使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準點進行的。使用transform-origin屬性，可以改變變形的基準點。

　　例六：兩個div元素，首先不改變變形的基準點，將第二個div元素進行旋轉。

　　代碼清單7：

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform指定基準點變形</title>
6 <style>
7 div {
8 width: 200px;
9 height: 200px;
10 display: inline-block;
11 line-height: 200px;
12 text-align: center;
13 }
14 div.a {
15 background-color: yellow;
16 }
17 div.b {
18 background-color: green;
19 -webkit-transform: rotate(45deg); /* for Chrome || Safari */
20 -moz-transform: rotate(45deg); /* for Firefox */
21 -ms-transform: rotate(45deg);　　　　　　　/* for IE */
22 -o-transform: rotate(45deg); /* for Opera */
23 }
24 </style>
25 </head>
26 <body>
27 <div class="a">黃色div</div>
28 <div class="b">綠色div</div>
29 </body>
30 </html>

運行結果（Chrome 14）：

下面使用transform-origin屬性把變形的基準點修改為第二個元素的左下角，代碼如下：

代碼清單8：

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform指定基準點變形</title>
6 <style>
7 div {
8 width: 200px;
9 height: 200px;
10 display: inline-block;
11 line-height: 200px;
12 text-align: center;
13 }
14 div.a {
15 background-color: yellow;
16 }
17 div.b {
18 background-color: green;
19 -webkit-transform: rotate(45deg); /* for Chrome || Safari */
20 -moz-transform: rotate(45deg); /* for Firefox */
21 -ms-transform: rotate(45deg); /* for IE */
22 -o-transform: rotate(45deg); /* for Opera */
23 /* 修改變形基準點 */
24 -webkit-transform-origin: left bottom; /* for Chrome || Safari */
25 -moz-transform-origin: left bottom; /* for Firefox */
26 -ms-transform-origin: left bottom; /* for IE */
27 -o-transform-origin: left bottom; /* for Opera */
28 }
29 </style>
30 </head>
31 <body>
32 <div class="a">黃色div</div>
33 <div class="b">綠色div</div>
34 </body>
35 </html>

運行結果（Chrome 14）：

　　指定transform-origin屬性值的時候，采用“基準點在元素水平方向上的位置，基準點在元素垂直方向上的位置”的方法，其中“基準點在元素水平方向上的位置”中可以指定的值為left、center、right，“基準點在垂直方向上的位置”中可以指定的值為top、center、bottom。

在CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理，下面將詳細講解transform的使用。

transform的功能分類

1.旋轉

transform:rotate(45deg);

該語句使div元素順時針旋轉45度。deg是CSS 3的“Values and Units”模塊中定義的一個角度單位。

2.縮放

transform:scale(0.8,1);

使用縮放的方法實現文字或圖像的縮放效果，在參數中指定縮放倍率。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

3.傾斜

transform:skew(30deg,0deg);

該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

4.移動

translate(50px,50px);

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。

指定變形的基準點

在使用transform方法進行文字或圖像的變形時，是以元素的中心點為基準點進行的。使用transform-orign屬性，可以改變變形的基準點。

transorm-origin:left bottom;

left和bottom是基準點在元素水平方向和垂直方向上的位置。

對一個元素使用多種變形方法

transform:rotate(45deg) scale(1.5) translate(50px,0px);

該綜合實例中對文字或圖像先旋轉45度，再縮放1.5倍，最后在水平方向移動150像素，在垂直方向移動200像素。

目前transform屬性在WebKit引擎的Web瀏覽器上需要添加“-webkit-”前綴，在Fifefox瀏覽器需要添加“-moz-”前綴,Opera瀏覽器上需要需要添加“-o-”前綴

總結

以上是生活随笔為你收集整理的CSS3中的transform变形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Transform

上一篇： CSS3中背景的四个新的属性
下一篇：深入理解CSS3 Animation 帧