CSS3中的transform变形
在CSS3中，用Transform功能可以實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實現(xiàn)。將這四種變形結(jié)合使用，就會產(chǎn)生不同的效果，使用順序不同，產(chǎn)生的效果是不一樣的。
目前瀏覽器支持情況：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+
一、旋轉(zhuǎn)：
CSS中使用rotate方法來實現(xiàn)對元素的旋轉(zhuǎn)，在參數(shù)中加入角度值，旋轉(zhuǎn)方式為順時針旋轉(zhuǎn)。
例一：一個黃色的div元素，通過在樣式代碼中使用“transform: rotate(45deg)”，語句使這個div元素順時針旋轉(zhuǎn)45度。deg是CSS3的“Values and Units”模塊中定義的一個角度單位。
代碼清單1：
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform旋轉(zhuǎn)</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>
運行結(jié)果（Chrome 14）:
二、縮放：
scale方法實現(xiàn)文字或圖像的縮放效果，參數(shù)中指定縮放倍率，例如：“scale(0.5)”表示縮小50%，參數(shù)可以是整數(shù)，也可以是小數(shù)。
例二：將一個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>
運行結(jié)果（Chrome 14）:
三、傾斜：
使用skew方法來實現(xiàn)文字或圖像的傾斜效果，在參數(shù)中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。例如“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>
運行結(jié)果（Chrome 14）:
注意：skew方法中的兩個參數(shù)可以修改成只使用一個參數(shù)，省略另一個參數(shù)，這可不是說水平方向和垂直方向一樣，這種情況視為只在水平方向傾斜，垂直方向上不傾斜。
看一下運行結(jié)果：
四、移動：
使用translate方法來實現(xiàn)將文字或圖像進行移動，在參數(shù)中分別指定水平方向上的移動距離與垂直方向上的移動距離。例如“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>
運行結(jié)果（Firefox 7）:
注意：translate方法中的兩個參數(shù)也可以修改成只使用一個參數(shù)，跟skew方法類似，省略另一個參數(shù)，這種情況視為只在水平方向移動，垂直方向上不移動。
運行結(jié)果(Firefox 7)：
對一個元素使用多種變形的方法：
例五：對一個div元素，先移動(向右移動150px，向下移動200px)，然后旋轉(zhuǎn)(順時針旋轉(zhuǎn)45度)，最后縮放(放大1.5倍)。
代碼清單5:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>Transform多重變形（先移動，然后旋轉(zhuǎn)，最后縮放）</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>
運行結(jié)果（Chrome 14）：
下面把上面代碼中幾個變形方法的順序調(diào)整一下，先旋轉(zhuǎn)(順時針旋轉(zhuǎn)45度)，然后縮放(放大1.5倍)，移動(向右移動150px，向下移動200px),?看看結(jié)果怎樣：
代碼清單6：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>Transform多重變形（先旋轉(zhuǎn)，然后縮放，最后移動）</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>
運行結(jié)果（Chrome 14）:
通過上面兩個示例可以看出，元素在兩個頁面上所處位置并不相同，為什么會這樣呢？
先看第一個例子：首先向右移動150px，向下移動200px，元素的中心點在水平方向先移動150px，再在垂直方向向下移動200px，然后在旋轉(zhuǎn)45度，放大1.5倍。
第二個例子：首先旋轉(zhuǎn)45度，并且放大了1.5倍，這時候元素是傾斜了45度角的，在移動的話，元素就是按45度角的方向向右移動150px，向下移動200px是沿著與水平方向呈225度方向移動的。看下下面的示意圖就很明顯了：
怎么樣，很容易看明白吧。
指定變形的基準(zhǔn)點：
使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準(zhǔn)點進行的。使用transform-origin屬性，可以改變變形的基準(zhǔn)點。
例六：兩個div元素，首先不改變變形的基準(zhǔn)點，將第二個div元素進行旋轉(zhuǎn)。
代碼清單7：
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform指定基準(zhǔn)點變形</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>
運行結(jié)果（Chrome 14）：
下面使用transform-origin屬性把變形的基準(zhǔn)點修改為第二個元素的左下角，代碼如下：
代碼清單8：
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform指定基準(zhǔn)點變形</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 /* 修改變形基準(zhǔn)點 */
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>
運行結(jié)果（Chrome 14）：
指定transform-origin屬性值的時候，采用“基準(zhǔn)點在元素水平方向上的位置，基準(zhǔn)點在元素垂直方向上的位置”的方法，其中“基準(zhǔn)點在元素水平方向上的位置”中可以指定的值為left、center、right，“基準(zhǔn)點在垂直方向上的位置”中可以指定的值為top、center、bottom。
在CSS3中，可以利用transform功能來實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這四種類型的變形處理，下面將詳細(xì)講解transform的使用。
transform的功能分類
1.旋轉(zhuǎn)
transform:rotate(45deg);
該語句使div元素順時針旋轉(zhuǎn)45度。deg是CSS 3的“Values and Units”模塊中定義的一個角度單位。
2.縮放
transform:scale(0.8,1);
使用縮放的方法實現(xiàn)文字或圖像的縮放效果，在參數(shù)中指定縮放倍率。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。
3.傾斜
transform:skew(30deg,0deg);
該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。
4.移動
translate(50px,50px);
使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。
指定變形的基準(zhǔn)點
在使用transform方法進行文字或圖像的變形時，是以元素的中心點為基準(zhǔn)點進行的。使用transform-orign屬性，可以改變變形的基準(zhǔn)點。
transorm-origin:left bottom;left和bottom是基準(zhǔn)點在元素水平方向和垂直方向上的位置。
對一個元素使用多種變形方法
transform:rotate(45deg) scale(1.5) translate(50px,0px);
該綜合實例中對文字或圖像先旋轉(zhuǎn)45度，再縮放1.5倍，最后在水平方向移動150像素，在垂直方向移動200像素。
目前transform屬性在WebKit引擎的Web瀏覽器上需要添加“-webkit-”前綴，在Fifefox瀏覽器需要添加“-moz-”前綴,Opera瀏覽器上需要需要添加“-o-”前綴
總結(jié)
以上是生活随笔為你收集整理的CSS3中的transform变形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3中背景的四个新的属性
- 下一篇： 深入理解CSS3 Animation 帧