讓元素呈現出“七十二變”的效果，就是這麼簡單
本文主要內容
一、CSS3的變形引入
二、二維變形的語法
三、二維變形的常用屬性分析
四、二維變形的操作例項
五、總結
一、CSS3的變形引入
在網頁設計中，CSS被習慣性的理解為擅長表現靜態樣式，動態的元素必須藉助於javascript才可以實現，而CSS3的出現改變了這一思維方式。CSS3除了增加革命性的創新功能外，還提供了對動畫的支援，可以用來實現旋轉、縮放、平移、扭曲和過渡效果等等，這些功能再一次證明了CSS3功能的強大和無限潛能。
CSS3實現元素變形的基礎來源於新增的transform屬性，該屬性可用於實現元素的旋轉、縮放、平移、扭曲等效果。目前webkit核心支援-webkit-transform私有屬性，Mozilla Geckos核心支援-moz-transform私有屬性，IE瀏覽器支援-ms-transform私有屬性。
二、二維變形的語法
Transform字面上就是變形、改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和平移translate。下面我們一起來看看CSS3中transform的這些屬性具體是如何實現的。老樣子，我們仍然從transform的語法開始。
transform的語法
transform ： none | transform-function [ transform-function ]*
也就是：
transform: rotate | scale | skew | translate;
語法分析：
none:表示不進麼變換；transform-function表示一個或多個變換函式，以空格分開；換句話說就是我們可以同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種。但這裡需要提醒大家，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時只需要用空格隔開
三、二維變形的常用屬性分析
檢視常見的二維變形之前，先書寫好如下的公共程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3二維變形</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
/*公共樣式程式碼*/
.wrap {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #666;
}
.wrap div {
float: left;
width: 150px;
height: 150px;
margin: 90px 80px 0 80px;
background: orange;
line-height: 150px;
text-align: center;
}
</style>
</head>
<body>
<!-- 案例的結構 -->
<div class="wrap clearfix">
<div>HTML5學堂-碼匠</div>
<div>HTML5學堂-碼匠</div>
<div>HTML5學堂-碼匠</div>
<div>HTML5學堂-碼匠</div>
<div>HTML5學堂-碼匠</div>
<div>HTML5學堂-碼匠</div>
</div>
</body>
</html>1、旋轉rotate
rotate(angle) ：通過指定的角度引數對元素指定一個旋轉，旋轉之前需先有transform-origin屬性的定義（下文講解）。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。如設定transform: rotate(30deg)。
.wrap div:nth-child(1) {
/*順時針旋轉30度*/
transform: rotate(30deg);
}效果如下：
2、平移translate
平移translate可以分為三種情況：
1）translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；
2）translateX(x)僅水平方向移動（X軸移動）；
3）translateY(y)僅垂直方向移動（Y軸移動）。
具體使用方法如下：
translate(x, y) ：通過向量[x, y]指定一個平移的數值，x是第一個過渡值引數，y 是第二個過渡值引數選項，如果y值未設定，則以0作為其值。當值為負數時，反方向移動物體。其基點預設為元素的中心點，也可以根據transform-origin進行改變基點（下文講解）。如transform: translate(100px, 20px)。
.wrap div:nth-child(2) {
/*X軸正方向平移100畫素，Y軸正方向平移20畫素*/
transform: translate(100px, 20px);
}效果如下：
translateX(x) ：通過給定一個X方向上的數值指定一個平移大小。只向x軸進行移動元素，如：transform: translateX(100px)。
.wrap div:nth-child(3) {
/*只向X軸正方向平移100畫素*/
transform: translateX(100px);
}效果如下：
translateY(y) ：通過給定一個Y方向上的數值指定一個平移大小。只向y軸進行移動元素，如：transform: translateY(20px)。
.wrap div:nth-child(4) {
/*只向Y軸正方向平移20畫素*/
transform: translateY(20px);
}效果如下：
3) 縮放scale
縮放scale和平移translate是極其相似的，它也具有三種情況：
1）scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；
2）scaleX(x)元素僅水平方向縮放（X軸縮放）；
3）scaleY(y)元素僅垂直方向縮放（Y軸縮放）。
它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數為1，如果其值大於1，元素就放大，反之其值小於1，元素縮小。因其與平移類似，所以我們主要看下scale(x, y)的使用效果。
scale(x, y])：提供[x, y]兩個引數指定一個縮放。如果第二個引數未提供，則取與第一個引數一樣的值。
scale(x, y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設定（下文講解）。基中x表示水平方向縮放的倍數，y表示垂直方向的縮放倍數，而y是一個可選引數，如果沒有設定y值，則表示x、y兩個方向的縮放倍數是一樣的，並以x為準。如設定transform: scale(2, 1.5)。
.wrap div:nth-child(5) {
/*X軸方向擴大2倍，Y軸方向擴大1.5倍*/
transform: scale(2, 1.5);
}效果如下：
解釋：上圖表示的是元素在X軸方向被擴大2倍，在Y軸方向被擴大1.5倍。
4) 扭曲skew
扭曲skew和translate、scale一樣具有三種情況：
1）skew(x, y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
2）skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3）skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）。
因為實現方式與平移和縮放一樣，所以也只給大家講解一下skew(x, y)兩個方向上的使用情況（單方向上的設定參照平移的書寫方式），具體使用如下：
skew(angle [, angle]) ：設定X軸與Y軸上的斜切變換。skew是用來對元素進行扭曲變形，第一個引數是水平方向扭曲角度，第二個引數是垂直方向扭曲角度，其中第二個引數是可選引數，如果沒有設定第二個引數，那麼Y軸為0deg。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置（下文講解）。如設定transform: skew(30deg, 10deg)。
.wrap div:nth-child(6) {
/*X軸方向扭曲30度，Y軸方向扭曲10度*/
transform: skew(30deg, 10deg)
}效果如下：
5）改變元素基點的transform-origin
前面我們多次提到transform-origin這個東西，它的主要作用就是在進行transform動作之前可以改變元素的基點位置，因為元素預設基點就是其中心位置，換句話說沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate、translate、scale、skew等操作都是以元素自己的中心位置進行變化的。
但有時候我們需要在不同的位置對元素進行這些操作，那麼就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在中心位置，以達到需要的基點位置，下面我們主要來看看其使用規則。
transform-origin(x, y)：用來設定元素的運動的基點（參照點），預設點是元素的中心點。其中x和y的值可以是百分值、em、px，其中x也可以是字元引數值left、center、right；y和x一樣除了百分值外還可以設定字元引數值top、center、bottom，這樣的設定有點像background-position的寫法一樣。如下：
4、二維變形的操作例項
在上面我們詳細介紹了CSS3中transform的各種屬性值的設定以及其各自的引數，下面通過一個例項來看看每一種屬性值的使用。為了節約空間和大家的時間，我們後面的例項都是在之前那個html基礎上實現，主要是我們在下面的選單中的a:hover中分別使用不同的transform的設定，換句話說，當你滑鼠移動到a連結上時，相應的每一個選單項有不同的變化。具體每一步可以看下面的例項：
基本的結構程式碼如下：
<div class="menu">
<ul class="clearfix">
<li class="item rotate"><a href="#">Rotate</a></li>
<li class="item translate"><a href="#">Translate</a></li>
<li class="item translate-x"><a href="#">TranslateX</a></li>
<li class="item translate-y"><a href="#">TranslateY</a></li>
<li class="item scale"><a href="#">Scale</a></li>
<li class="item scale-x"><a href="#">ScaleX</a></li>
<li class="item scale-y"><a href="#">ScaleY</a></li>
<li class="item skew"><a href="#">Skew</a></li>
<li class="item skew-x"><a href="#">SkewX</a></li>
<li class="item skew-y"><a href="#">SkewY</a></li>
</ul>
</div>為了效果更好看一點，給上面的導航選單加上一點CSS樣式。
.wrap .menu {
width: 100%;
margin: 100px auto;
background-color: #fff;
}
.menu ul {
border-top: 15px solid black;
padding: 0 10px;
}
.menu ul li a{
float: left;
height: 50px;
width: 65px;
margin: 0 10px;
padding: 10px 5px;
color: #fff;
background: #151515;
font-size: 14px;
line-height: 50px;
text-align: center;
text-decoration: none;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
text-shadow: 0 1px 1px #686868;
}
.menu ul li.rotate a {
background: #d50e19;
}
.menu ul li.translate a{
background: #2ec7d2;
}
.menu ul li.translate-x a {
background: #8fdd21;
}
.menu ul li.translate-y a {
background: #f45917;
}
.menu ul li.scale a {
background: #cdddf2;
}
.menu ul li.scale-x a {
background: #0fdd21;
}
.menu ul li.scale-y a {
background: #cd5917;
}
.menu ul li.skew a {
background: #519;
}
.menu ul li.skew-x a {
background: #d50;
}
.menu ul li.skew-y a {
background: #e19;
}在上面使用了一些前面所講的CSS3的屬性，製作出了一個的比較簡潔明亮的導航效果，如下：
從效果圖上可以清楚的看到每個選單上分別對應的是transform中的Rotate、Translate、TranslateX、TranslateY、Scale、ScaleX、ScaleY、Skew、SkewX、SkewY，下面就在相應的a:hover加上各自對應的效果。
.menu ul li.rotate a:hover {
transform: rotate(45deg);
}
.menu ul li.translate a:hover {
transform: translate(-10px,-10px);
}
.menu ul li.translate-x a:hover {
transform: translateX(-10px);
}
.menu ul li.translate-y a:hover {
transform: translateY(-10px);
}
.menu ul li.scale a:hover {
transform: scale(0.8,0.8);
}
.menu ul li.scale-x a:hover {
transform: scaleX(0.8);
}
.menu ul li.scale-y a:hover {
transform: scaleY(1.2);
}
.menu ul li.skew a:hover {
transform: skew(45deg,15deg);
}
.menu ul li.skew-x a:hover {
transform: skewX(-30deg);
}
.menu ul li.skew-y a:hover {
transform: skewY(30deg);
}上面的效果都是以元素自身的中心點為基點，只需要使用滑鼠進行懸停操作，即可展示出transform中各種相關的風格效果，如圖所示：
5. 總結
在上面的例項中，我們的中心點都是元素的中點，大家可以嘗試去改變選單欄中的元素基點，看看可否達到不一樣的效果。
本文關於CSS3中的二維變形就介紹完了。最後補充一句，transform的旋轉、平移、縮放、扭曲除了單獨使用以外，也可以把多個進行組合來使用，只是其屬性值之間不能用逗號（“，”）分隔，而必須使用空格分隔。
本文系HTML5學堂獨家內容，轉載請在文章開頭顯眼處註明作者和出處“HTML5學堂(http://www.h5course.com/)”