CSS3中如何實現圖片翻轉

今天將和大家分享如何利用CSS3中的知識來製作一個圖片翻轉的功能，CSS3中圖片翻轉效果主要透過設定transition過渡動畫以及transform旋轉動畫來共同實現

#【推薦課程：CSS3教學】

##案例分析

圖片翻轉效果的想法：先利用position定位將兩張圖片重疊到一起同時還需要將背面的圖片隱藏，這樣給人的效果是頁面上僅有一張圖片，但是當滑鼠觸發時，後面的圖片旋轉顯示出現在前面，而原先在前面的圖片則旋轉隱藏到後面。

（1）position：定位

relative：相對定位

absolute：絕對定位

（2） backface-visibility：隱藏被旋轉的div元素的背面

visible ：背面是可見的

hidden：背面是不可見的    

（3）z-index 屬性

#設定元素的堆疊順序，設定的值越大層級越高，在頁面中越前

（4）transition-property：設定需要過渡效果的CSS屬性名稱

 none ：沒有屬性會獲得過渡效果   

 all：所有屬性將會獲得過渡效果    

  property：定義套用過渡效果的CSS 屬性名稱列表，清單以逗號分隔。

（5）transition-duration：完成過渡效果需要多少秒或毫秒

（6）transition-timing-function：完成過渡效果的速度曲線

  linear：勻速   

  ease：先慢後快然後再慢    規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。      

   cubic-bezier(n,n,n,n)：在 cubic-bezier 函數定義自己的值，可能的值為 0 至 1 之間的數值。

（7）transition-delay：過渡效果是否延遲，從何時開始

（8）transform 屬性：元素應用2D 或3D 轉換

 例：rotateX( 180deg)：沿著X軸旋轉180度

注意瀏覽器相容問題

-moz- ：Firefox 

-webkit-：Safari 和Chrome
-o- ：Opera 

完整程式碼：

本案例在chrome瀏覽器中執行

<br/>

效果圖

動態效果

總結：以上就是這篇文章的全部內容了，透過這篇文章的分享希望大家對圖片的翻轉有一定的了解。

以上是CSS3中如何實現圖片翻轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！