【推薦課程：CSS3教程】

案例分析

圖片翻轉(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 ：背面是可見(jiàn)的

hidden：背面是不可見(jiàn)的

（3）z-index 屬性

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

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

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

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

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

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

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

linear：勻速

ease：先慢后快然后再慢 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(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í)開(kāi)始

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

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

注意瀏覽器兼容問(wèn)題

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

完整代碼：

本案例在chrome瀏覽器中運(yùn)行

效果圖

動(dòng)態(tài)效果

總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，通過(guò)本篇文章的分享希望大家對(duì)圖片的翻轉(zhuǎn)有一定的了解。

以上就是CSS3中如何實(shí)現(xiàn)圖片翻轉(zhuǎn)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！