Home » CSS3 應用

[CSS3]用 CSS3 做畫廊 - 滑入滑出時偽原地縮放圖片

範例 1
沒錯!只要 1,000 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

筆者在用 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 開始計算的唷!
css3-hover-scale-image-0

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;
}

不過...
css3-hover-scale-image-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 真的是讓元素的活起來的重點屬性呢!
css3-hover-scale-image-2

等不急自己做的話,下面也能讓你搶先動手玩:

See the Pen [CSS3]用 CSS3 做畫廊 - 滑入滑出時偽原地縮放圖片 by abgne.tw (@abgne-tw) on CodePen

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

2 筆針對 [CSS3]用 CSS3 做畫廊 - 滑入滑出時偽原地縮放圖片 的迴響

發表迴響