一、我們來給按鈕增加一個懸停效果：#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px white;}兩種狀態下的效果如下，先看預設狀態： 再看懸停狀態： 這裡只是在滑鼠懸停時簡單地修改了一下文 ...
一、我們來給按鈕增加一個懸停效果：
#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 ）。
