CSS3 transform之scale縮放|transition之過渡動畫調整手記

想給學而行營銷網圖文列表中的圖片，增加一點動態交互——別一動不動地躺屍，太平了！

看過別家的網站，其中滑鼠移到圖片上，圖片會適當地進行縮放，這種微妙的動態體驗，給人的感覺是蠻好的。

哥知道這是css3可以實現的功能。試為之。

既然是滑鼠移上去後再發生變化，那首先需在css文件中，針對圖片的hover增加個樣式，縮放比例為1.1。如下：

.index-list-tu li a img:hover {-webkit-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}

懷著憧憬，查看變化。

結果：動態是有了，只是動作太迅猛，不平滑，感覺很突兀。就像以前用flash製作動畫一樣，缺少中間過渡（這個知識點，源於已經過世的flash）。

（沒玩過動態的gif錄屏，用ps製作了一個動畫來模擬。）

看來沒那麼簡單，還需要對圖片對應的樣式寫上css3的transition（過渡）。如下紅色為增加的transition部分：

.index-list-tu li a img {width: 230px;height: 145px;border-radius:3px;float: left;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;}

如此追加了，這個針對圖片的平滑的微動效就有了（可參見學而行營銷網首頁中的圖文列表）。

關於CSS3 transform的更多知識方法，可以參考w3cschool提供的這個：CSS3 transform 屬性 CSS3 過渡

另有發現一個小問題：就是縮放1.1倍後，其所佔據的空間也增大了。這樣也可以接受，但個人感覺最好是保持在原有的框框內，以保持整體的齊整性及美觀。

那就去找包圍圖片的那個div（<div class=」imgarea fl」>），在樣式中為其加入overflow。css代碼如下：

.notice .tab-pal .imgarea {width: 28%;position: relative;display: inline-block;overflow: hidden;}

css是個神奇的東西，如同一個大寶庫取之不盡用之不竭，從我從事網頁製作工作接觸css開始，一直以為css很簡單，現在已經超過十五年過去了，我卻發現：還有好多的css知識和技巧，我根本就未曾知曉.