图片翻转
本人錄制技術(shù)視頻地址：https://edu.csdn.net/lecturer/1899?歡迎觀看。
這一節(jié)繼續(xù)為大家介紹CSS3的動(dòng)畫效果: 圖片翻轉(zhuǎn)。 在iOS中的章節(jié)中，我也介紹過類似的效果，如果感興趣的話，請(qǐng)點(diǎn)擊這里查看：動(dòng)畫特效一：圖片翻轉(zhuǎn)?。
先看看最終的效果圖：
一、所用素材：
? ? ? ?
兩張圖片的大小均為258 * 258。
二、思路分析：
從最終的效果圖可以看出， "Baby" 默認(rèn)是顯示在前面的， 而 "小明" 是顯示在后面的。并且旋轉(zhuǎn)過來之后， "小明" 也應(yīng)該是正面顯示在前面，如素材所列出的。那么，默認(rèn)情況下， "小明" 應(yīng)該顯示在后面，所以它需要繞著y軸旋轉(zhuǎn)180°。立體圖如下:
三、代碼分析：
1. HTML代碼：
<body><div id="box"><div class="xiaoming"></div><div class="angelababy"></div></div> </body>2. CSS代碼:
<style type="text/css">#box{width:258px;height:258px;position: relative;}#box .xiaoming{width:258px;height:258px;position: absolute;top:0;left:0;border-radius:129px;-webkit-transform:rotateY(-180deg);/* FireFox對(duì)backface-visibility的支持有點(diǎn)問題*/-webkit-backface-visibility:hidden;background: url(xiaoming.png) no-repeat;transition:all 2s ease 0s;}#box .angelababy{width:258px;height:258px;position: absolute;top:0;left:0;border-radius:129px;-webkit-transform:rotateY(0deg);-webkit-backface-visibility:hidden;background: url(angelababy.png) no-repeat;transition:all 2s ease 0s;}#box:hover .xiaoming{-webkit-transform:rotateY(0deg);}#box:hover .angelababy{-webkit-transform:rotateY(-180deg);}</style>1）#box 是父容器，用來存放 "Baby" 和 "小明" 的圖片信息, 并且它的大小是 258 * 258, 就是所用素材圖片的大小。因?yàn)樗歉溉萜?#xff0c;所以設(shè)置position: relative.
2）由于"Baby" 和 "小明" 都是圓形顯示，所以設(shè)置他們的 border-radius 為 129px; 即為圖片寬度的一半。
3）由于 "小明" 默認(rèn)是在后面的，而 "Baby" 是正面顯示的，所以設(shè)置-webkit-transform屬性值分別為 rotateY(-180deg) 和 rotateY(0)。
4）-webkit-backface-visibility 這個(gè)屬性，如果不設(shè)置的話，圖片就算翻轉(zhuǎn)180°之后，還是可以看到翻轉(zhuǎn)之后的圖片的；這樣的話，在翻轉(zhuǎn)過程中，兩張圖片就會(huì)同時(shí)看到了，這樣就達(dá)不到想要的效果了，大家可以將代碼中的這個(gè)屬性注釋掉，可以看看效果。
5）transition這個(gè)屬性是CSS3的一個(gè)特有屬性，可以方便的用來執(zhí)行動(dòng)畫過度效果。
對(duì)這個(gè)屬性的支持，主流瀏覽器如下:
這個(gè)屬性各個(gè)值的含義如下：
| transition-property | 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規(guī)定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規(guī)定速度效果的速度曲線。 |
| transition-delay | 定義過渡效果何時(shí)開始。 |
本例中，所用的這個(gè)屬性的第一個(gè)值，是設(shè)置為all。所以當(dāng)元素有任何屬性值發(fā)生變化的話，都會(huì)觸發(fā)這個(gè)屬性，執(zhí)行動(dòng)畫。
6）:hover 偽類就會(huì)觸發(fā)鼠標(biāo)進(jìn)入或者離開時(shí)候的事件，而它觸發(fā)的是元素的旋轉(zhuǎn)屬性，因此就會(huì)調(diào)用transition屬性，進(jìn)行圖片的翻轉(zhuǎn)效果。
轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/10809234.html
總結(jié)
- 上一篇： Python之IO模式 阻塞式io 非阻
- 下一篇： 实验吧之NSCTF misc250