图片翻转
本人錄制技術視頻地址：https://edu.csdn.net/lecturer/1899?歡迎觀看。
這一節繼續為大家介紹CSS3的動畫效果: 圖片翻轉。 在iOS中的章節中，我也介紹過類似的效果，如果感興趣的話，請點擊這里查看：動畫特效一：圖片翻轉?。
先看看最終的效果圖：
一、所用素材：
? ? ? ?
兩張圖片的大小均為258 * 258。
二、思路分析：
從最終的效果圖可以看出， "Baby" 默認是顯示在前面的， 而 "小明" 是顯示在后面的。并且旋轉過來之后， "小明" 也應該是正面顯示在前面，如素材所列出的。那么，默認情況下， "小明" 應該顯示在后面，所以它需要繞著y軸旋轉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對backface-visibility的支持有點問題*/-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, 就是所用素材圖片的大小。因為它是父容器，所以設置position: relative.
2）由于"Baby" 和 "小明" 都是圓形顯示，所以設置他們的 border-radius 為 129px; 即為圖片寬度的一半。
3）由于 "小明" 默認是在后面的，而 "Baby" 是正面顯示的，所以設置-webkit-transform屬性值分別為 rotateY(-180deg) 和 rotateY(0)。
4）-webkit-backface-visibility 這個屬性，如果不設置的話，圖片就算翻轉180°之后，還是可以看到翻轉之后的圖片的；這樣的話，在翻轉過程中，兩張圖片就會同時看到了，這樣就達不到想要的效果了，大家可以將代碼中的這個屬性注釋掉，可以看看效果。
5）transition這個屬性是CSS3的一個特有屬性，可以方便的用來執行動畫過度效果。
對這個屬性的支持，主流瀏覽器如下:
這個屬性各個值的含義如下：
| transition-property | 規定設置過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規定速度效果的速度曲線。 |
| transition-delay | 定義過渡效果何時開始。 |
本例中，所用的這個屬性的第一個值，是設置為all。所以當元素有任何屬性值發生變化的話，都會觸發這個屬性，執行動畫。
6）:hover 偽類就會觸發鼠標進入或者離開時候的事件，而它觸發的是元素的旋轉屬性，因此就會調用transition屬性，進行圖片的翻轉效果。
轉載于:https://www.cnblogs.com/lonelyxmas/p/10809234.html
總結
- 上一篇： Python之IO模式 阻塞式io 非阻
- 下一篇： 实验吧之NSCTF misc250