一、我們來給按鈕增加一個懸停效果：
#content a:hover {
border: 1px solid #000000;
color: #000000;
text-shadow: 0px 1px white;
}
兩種狀態下的效果如下，先看預設狀態：

再看懸停狀態：

這裡只是在滑鼠懸停時簡單地修改了一下文字、文字陰影以及邊框的顏色。所以，你可
能想象出來，使用這段 CSS 程式碼，當滑鼠懸停在按鈕上面時，按鈕會直接從第一種狀態
（白色文字）突變到第二種狀態（黑色文字）——就是一個開關效果。我們來給第一段
CSS規則新增一點 CSS3魔法：
#content a {
transition: all 1s ease 0s;
}

現在再把滑鼠懸停在按鈕上，文字、文字陰影和邊框陰影的顏色都會從第一種狀態平滑
過渡到第二種狀態。

CSS3過渡效果涉及四個屬性，也可以使用包含這四個屬性的縮寫。
 transition-property ：要過渡的 CSS 屬性名稱（比如 background-color 、
text-shadow 或者 all ，使用 all 則過渡會被應用到每一個可能的 CSS屬性上）；
 transition-duration ：定義過渡效果持續的時間（時間單位為秒，比如 .3s 、 2s
或 1.5s ）；
 transition-timing-function ：定義過渡期間速度如何變化（比如 ease 、 linear 、
ease-in 、 ease-out 、 ease-in-out 或 cubic-bezier ）；
 transition-delay ：可選，用於定義過渡開始前的延遲時間。相反，將該值設定為
一個負數，可以讓過渡效果立即開始，但過渡旅程則會從半路開始。
單獨使用各種過渡屬性建立轉換效果的語法如下：
#content a {
……其他樣式……
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

1. 過渡的簡寫語法
正如我們之前所見過的那樣，我們可以將單個的宣告組合成一個簡寫版：
transition: all 1s ease 0s;

簡寫宣告添加了瀏覽器私有字首
之後，程式碼如下：
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;

2. 在不同時間段內過渡不同屬性
當一條規則要實現多個屬性過渡時，這些屬性不必步調一致。看看下面這段程式碼：
#content a {
/*……其他樣式……*/
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
此處我們通過 transition-property 來指定只過渡 border 、 color 和 text-shadow ，
然後在 transition-duration 宣告中我們設定邊框過渡效果應該 2秒內完成，文字顏
色 3秒，文字陰影 8秒。由逗號分隔的過渡持續時間按順序對應上面的 CSS屬性。

二、CSS3 的 2D 變形

有兩種可用的 CSS3變形：2D變形和 3D變形。2D變形的實現更廣泛，瀏覽器支援更好，
寫起來也更簡單些，所以我們先來看看 2D 變形。CSS3 的 2D 變形模組允許我們使用下
列變形。
 scale ：用來縮放元素（放大或縮小）
 translate ：在螢幕上移動元素（上下左右四個方向）
 rotate ：按照一定角度旋轉元素（單位為度）
 skew ：沿 X和 Y軸對元素進行斜切
 matrix ：允許你以畫素精度來控制變形效果

傻瓜化的矩陣變形工具
無論怎麼想象我都不是一個數學家，所以當我需要建立矩陣變形時，我一般都走捷徑。
如果你的數學也不太好，我建議你訪問這裡

傻瓜化的矩陣變形工具
無論怎麼想象我都不是一個數學家，所以當我需要建立矩陣變形時，我一般都走捷徑。
如果你的數學也不太好，我建議你訪問這裡：http://www.useragentman.com/matrix/

嘗試 CSS3 的 3D 變形

將滑鼠懸停在圖片上（在觸控式螢幕上則是觸擊圖片）就能揭曉答案。
下面的程式碼是相關的頁面標籤，其中省略了重複的圖片標籤，因為它們的結構都一樣：
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>
對應的 CSS程式碼如下。

.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}
程式碼部署好之後，將滑鼠懸停在海報圖片上，會看到圖片翻轉到背面並顯示出了該電影
的評判結果。

CSS3 動畫效果

首先是關鍵幀規則：
@keyframes warning {
0% {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 20px #000000;
}
100% {
text-shadow: 0px 0px 4px #000000;
}
}
此處的程式碼沒有加字首，如果在瀏覽器中沒有效果，你可能需要新增一組完整的瀏覽器
私有字首（如 @-webkit-keyframes ）。

分析程式碼：

首先，我們定義了一個 @keyframes （關鍵幀）宣告。然後為這個特定的關鍵幀宣告設定
了一個名稱： warning 。你可以將其叫成任何名字，但考慮到這些關鍵幀宣告可以在多
個元素上覆用，所以建議取一個合理的名字。
可以設定多個關鍵幀（比如百分比值 10%、20%、30%、40%等等），或者也可以使用 from
和 to 值來定義動畫的開始幀和結束幀。

動畫開始時是 4畫素陰影，然後用 50%的時間變化至 40像
素陰影，之後再變化回 4畫素陰影

我們設定了要使用的關鍵幀（例子中的 warning ），然後設定
了動畫的持續時間（ 1.5s ），之後設定了 animation-iteration-count （我們在此時
使用了 infinite 讓動畫連續迴圈播放），最後設定了調速函式（ ease-in ）。