在CSS3中何暮，可以利用transform功能來實現(xiàn)文字或圖像的旋轉(zhuǎn)奄喂、縮放、傾斜和移動著4種類型的變形處理海洼。
transform功能的基礎(chǔ)知識
在CSS3中砍聊，通過transform屬性來使用transform功能玻蝌。
transform功能分類
旋轉(zhuǎn)
使用rotate方法贰盗，在參數(shù)中加入角度值陋率，角度值后面跟表示角度單位的deg文字即可，旋轉(zhuǎn)方向為順時針旋轉(zhuǎn)。
div{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
<div>示例文字</div>
運行效果：
縮放
使用scale方法來實現(xiàn)文字或圖像的縮放處理轧苫，在參數(shù)中指定縮放倍率。
div{
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
<div>示例文字</div>
上面的示例使div元素縮小了50%拗小。
另外，可以分別指定元素水平方向的放大倍率與垂直方向的放大倍率。
div{
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
transform:scale(0.5,2);
-webkit-transform:scale(0.5,2);
-moz-transform:scale(0.5,2);
-o-transform:scale(0.5,2);
}
<div>示例文字</div>
上面的示例使div元素水平方向縮小了50%，垂直方向放大了一倍。
效果如圖：
傾斜
使用skew方法來實現(xiàn)文字或圖像的傾斜處理腿时，在參數(shù)中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度格了。
div{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
transform: skew(30deg,30deg);
-webkit-transform: skew(30deg,30deg);
-moz-transform: skew(30deg,30deg);
-o-transform: skew(30deg,30deg);
}
<div>示例文字</div>
上面的示例使div元素水平方向上傾斜了30度满败，垂直方向上傾斜了30度。
效果如圖：
另外， skew方法中的兩個參數(shù)可以修改成只使用一個參數(shù)厢漩，省略另一個參數(shù)，這種情況下視為只在水平方向上進(jìn)行傾斜，垂直方向上不傾斜捎琐。
移動
使用translate方法來將文字或圖像進(jìn)行移動拨黔，在參數(shù)中分別指定水平方向上的移動距離與垂直方向上的移動距離零截。
div{
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
transform:translate(50px,50px);
-webkit-transform:translate(50px,50px);
-moz-transform:translate(50px,50px);
-o-transform:translate(50px,50px);
}
<div>示例文字</div>
上面的示例把div元素水平方向上向右移動了50px弧哎，垂直方向上向上移動了50px序攘。
另外，translate方法中的兩個參數(shù)可以修改成只使用一個參數(shù)，省略另一個參數(shù)遂铡，這種情況下視為只在水平方向上進(jìn)行移動钾怔，垂直方向上不移動。
對一個元素使用多種變形的方法
變形示例
示例1：
// 先移動馋袜，然后旋轉(zhuǎn)泽台，最后縮放
div{
width: 300px;
background-color: yellow;
text-align: center;
transform: translate(150px, 200px) rotate(45deg) scale(1.5);
-webkit-transform: translate(150px, 200px) rotate(45deg) scale(1.5);
-moz-transform: translate(150px, 200px) rotate(45deg) scale(1.5) ;
-o-transform: translate(150px, 200px) rotate(45deg) scale(1.5);
}
<div>示例文字</div>
效果如圖：
示例2：
// 先旋轉(zhuǎn)咐吼，然后縮放晚碾，最后移動
div{
width: 300px;
background-color: yellow;
text-align: center;
transform:rotate(45deg) scale(1.5) translate(150px, 200px);
-webkit-transform:rotate(45deg) scale(1.5) translate(150px, 200px);
-moz-transform:rotate(45deg) scale(1.5) translate(150px, 200px);
-o-transform:rotate(45deg) scale(1.5) translate(150px, 200px);
}
<div>示例文字</div>
效果如圖：
這兩個示例都是對同一個頁面中同一個元素進(jìn)行多重變形的示例殃恒， 而且各種變形方曲中所使用的參數(shù)也都相同，差別只是使用三種變形方法的先后順序不一樣咕别。但欣孤，元素在兩個頁面上所處位置并不相同。說明transform參數(shù)的順序不同鉴扫，結(jié)果可能會不一樣误堡。
指定變形的基準(zhǔn)點
在使用transform方融進(jìn)行文字或圖像的變形時姥饰，是以元素的中心點為基準(zhǔn)點進(jìn)行的。使用transform-origin屬性瘩蚪，可以改變變形的基準(zhǔn)點呢灶。
// 不改變基準(zhǔn)點钉嘹，并將第二個div元素進(jìn)行旋轉(zhuǎn)
div{
width: 200px;
height:200px;
display:inline-block;
}
div#a{
background-color: pink;
}
div#b{
background-color: green;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
<div id="a"></div>
<div id="b"></div>
接下來奖年，我們使用transform-origin屬性把變形的基準(zhǔn)點修改為第二個元素的左下角處陋守。
// 將基準(zhǔn)點修改為第二個div元素的左下角
div#b{
background-color: green;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
//修改變形基準(zhǔn)點
transform-origin: left bottom;
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
}
運行效果：
transform-origin屬性的兩個參數(shù)分別代表：基準(zhǔn)點在元素水平方向上的位置博敬，基準(zhǔn)點在元素垂直方向上的位置硼补，其中"基準(zhǔn)點在元素水平方向上的位置"中可以指定的值為left浪读、center、right辛藻， "基準(zhǔn)點在元素垂直方向上的位置"中可以指定的值為top碘橘、center、bottom吱肌。
