一.用CSS3的好處
1.使用簡單，易于學(xué)習(xí)
2.性能相對優(yōu)化
二.學(xué)習(xí)前需要了解的知識
html5基本語法
css3基本用法
三.頁面效果展示
如圖片所示（這里以網(wǎng)上書城系統(tǒng)為例），當(dāng)鼠標(biāo)滑過書本（中間書）時(shí)，書的圖片放大，并且會從左邊滑過標(biāo)簽顯示書目的價(jià)格，簡介，作者等信息。當(dāng)鼠標(biāo)移開就恢復(fù)原狀。（如圖，左右兩邊的為初始狀態(tài)，中間的為鼠標(biāo)滑過的狀態(tài)）
四.主要內(nèi)容
1.掌握figure以及figcaption的基本用法
2.熟練掌握transform的基本屬性及其用法
3.通過transition和transform配合制作簡單的動畫
五.屬性及其代碼介紹
（1）figure和figcaption（HTML）
figure標(biāo)簽：用于規(guī)定獨(dú)立的內(nèi)容，好比一個(gè)容器，用來存放圖像，圖表，照片等
figcaption標(biāo)簽：和figure一起使用，主要是用來定義figure標(biāo)簽的標(biāo)題。
（2）transform和transition（CSS屬性）
transform：用于元素的變形處理（例如：放大，縮小，旋轉(zhuǎn)等）原理：通過改變元素的位置參數(shù)來實(shí)現(xiàn)元素的變形。
transition：用于元素過渡動畫處理。（通過參數(shù)設(shè)置控制動畫時(shí)間，延遲等）
HTML頁面：
HTML的基本部署在此不多講。
如果想要使得頁面分布合理些可以建立table標(biāo)簽，將頁面分為幾個(gè)模塊，每個(gè)模塊存放一個(gè)元素（這里以書本代替）在此直接編寫figure代碼。
在table的子標(biāo)簽<tr>中創(chuàng)建figure標(biāo)簽，給figure一個(gè)class="test1" 創(chuàng)建figcaption，用于存放圖片要用的標(biāo)簽信息。（以下用我的工程作為例子）
<figure class="test1">
? ? ? ? <img src="你圖片的地址" width="?",height="?"> (圖片地址：如果用DW編輯器建議直接插入圖片，如果是myeclipse就得把圖片放到工程目錄下輸入地址導(dǎo)入)
<figcaption>
? ? ? ? <p>售價(jià)：￥10</p>
? ? ? ? <p>作者</p>
? ? ? ? <p>簡介</p>
</figcaption>
</figure>
接下來寫CSS 重點(diǎn)！
建立公共類
（以上屬性根據(jù)我的頁面來設(shè)置，可以參照，根據(jù)實(shí)際情況更改）
對P標(biāo)簽進(jìn)行設(shè)置，通過transform來實(shí)現(xiàn)P標(biāo)簽的動畫（P標(biāo)簽從屏幕的左邊-180px的位置開始移入（-代表左））
此代碼代表：hover鼠標(biāo)經(jīng)過實(shí)現(xiàn)動畫。（標(biāo)簽移動到0px處，及由-180px到0px）
標(biāo)簽從-180px滑到0px的時(shí)間延遲
接下來最后一步，實(shí)現(xiàn)圖片的放大還原，給img設(shè)置屬性，當(dāng)hover時(shí)，調(diào)用transform：scale（1.5，1.5），表示圖片的長寬擴(kuò)大1.5倍。（根據(jù)實(shí)際調(diào)整）
六.總結(jié)
通過此篇教程，可以學(xué)習(xí)到用單純的CSS3實(shí)現(xiàn)圖片的放大縮小，標(biāo)簽的移動。如果用JS去實(shí)現(xiàn)也可以，但是代碼量更大，設(shè)置更復(fù)雜。用此種方法更為簡便。同時(shí)還可以更改transform屬性，放大縮小是通過scale來實(shí)現(xiàn)，也可以用rotate實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過實(shí)現(xiàn)圖片的旋轉(zhuǎn)等，做出更絢麗的效果。
