CSS3實(shí)現(xiàn)圖片翻轉(zhuǎn)效果

這篇文章主要介紹了使用CSS3實(shí)現(xiàn)圖片翻轉(zhuǎn)效果的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。如下資料是關(guān)于實(shí)現(xiàn)圖片翻轉(zhuǎn)效果的詳細(xì)步驟內(nèi)容。

案例分析

圖片翻轉(zhuǎn)效果的思路：先利用position定位將兩個(gè)圖片重疊到一起同時(shí)還需要將背面的圖片隱藏，這樣給人的效果是頁(yè)面上僅有一張圖片，但是當(dāng)鼠標(biāo)觸發(fā)時(shí)，后面的圖片旋轉(zhuǎn)顯示出現(xiàn)在前面，而原先在前面的圖片則旋轉(zhuǎn)隱藏到后面。

（1）position：定位

relative：相對(duì)定位

absolute：絕對(duì)定位

（2） backface-visibility：隱藏被旋轉(zhuǎn)的 div 元素的背面

visible ：背面是可見的

hidden：背面是不可見的

（3）z-index 屬性

設(shè)置元素的堆疊順序，設(shè)置的值越大層級(jí)越高，在頁(yè)面中越前

（4）transition-property：設(shè)置需要過(guò)渡效果的CSS屬性名

none ：沒有屬性會(huì)獲得過(guò)渡效果

all：所有屬性都將會(huì)獲得過(guò)渡效果

property：定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。

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

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

linear：勻速

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

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

（7）transition-delay：過(guò)渡效果是否延遲，從何時(shí)開始

（8）transform 屬性：元素應(yīng)用 2D 或 3D 轉(zhuǎn)換

例：rotateX(180deg)：沿X軸旋轉(zhuǎn)180度

注意瀏覽器兼容問題

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

以上就是CSS3實(shí)現(xiàn)圖片翻轉(zhuǎn)效果的方法，內(nèi)容較為全面，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ骺赡軙?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。