筆者在用 jQuery 做畫廊 – 滑入滑出時偽原地縮放圖片中為了達到以中心為原點的縮放效果,程式中寫了較多的判斷。但其實使用 CSS3 的 transform 的話,根本不用寫什麼複雜的語法就能達到以中心為原點進行縮放了。
HTML 的部份不變:
1 2 3 4 5 6 7 8 9 10 | <body> <ul id="abgne-block-20140105"> <li><a href="#"><img src="img/j.jpg"/></a></li> <li><a href="#"><img src="img/q.jpg"/></a></li> <li><a href="#"><img src="img/u.jpg"/></a></li> <li><a href="#"><img src="img/e.jpg"/></a></li> <li><a href="#"><img src="img/r.jpg"/></a></li> <li><a href="#"><img src="img/y.jpg"/></a></li> </ul> </body> |
加上基本的 CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #abgne-block-20140105, #abgne-block-20140105 li { list-style: none; margin: 0; padding: 0; } #abgne-block-20140105 { position: relative; top: 100px; left: 100px; width: 650px; height: 100px; } #abgne-block-20140105 li { position: absolute; } #abgne-block-20140105 li a img { border: none; } |
不過在在用 jQuery 做畫廊 – 滑入滑出時偽原地縮放圖片中是透過 jQuery 來將每一個 li 進行位置的排列,那麼現在呢?需要將每一個 li 指定不同的 class 名稱,然後再一一設定座標嗎?
哈哈~一一設定座標是少不了的,但將每一個 li 指定不同的 class 名稱就可以免了。在新的 CSS3 選擇器中,我們可以使用 :nth-child(n) 來找出指定排行的子元素:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #abgne-block-20140105 li:nth-child(1) { left: 0px; } #abgne-block-20140105 li:nth-child(2) { left: 110px; } #abgne-block-20140105 li:nth-child(3) { left: 220px; } #abgne-block-20140105 li:nth-child(4) { left: 330px; } #abgne-block-20140105 li:nth-child(5) { left: 440px; } #abgne-block-20140105 li:nth-child(6) { left: 550px; } |
有別於一般程式中的第一位都是從 0 開始計算,在 CSS3 中的 :nth-child(n) 從 1 開始計算的唷!
transform 屬性提供了 scale(x, y) 的語法讓元素可以進行縮放,其中 x 是指寬度的縮放倍數;而 y 則是高度的縮放倍數。若是只有提供一個值時,則表示 x 及 y 一併縮放指定的倍數。
所以只要在 li 被滑鼠移上去時進行縮放就可以了:
1 2 3 4 5 6 7 8 | #abgne-block-20140105 li:hover{ -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); z-index: 1; } |
不過...
是有縮放啦~但並沒有縮放的動畫效果。因為是 li 進行 transform 屬性的改變,所以若想要有補間動畫效果的話,就得要針對 li 進行 transition 的相關設定才行喔:
1 2 3 4 5 6 7 8 | #abgne-block-20140105 li { position: absolute; -webkit-transition: -webkit-transform 0.4s linear; -moz-transition: -moz-transform 0.4s linear; -o-transition: -o-transform 0.4s linear; -ms-transition: -ms-transform 0.4s linear; transition: transform 0.4s linear; } |
有沒有覺得 transition 真的是讓元素的活起來的重點屬性呢!
等不急自己做的話,下面也能讓你搶先動手玩:
See the Pen [CSS3]用 CSS3 做畫廊 - 滑入滑出時偽原地縮放圖片 by abgne.tw (@abgne-tw) on CodePen
請問一下~#abgne-block-20140105是什麼意思??
這...是幫元素加上 id 而已。