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

創(chuàng)新互聯(lián)：成立與2013年為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為成百上千公司企業(yè)提供了專業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計和網(wǎng)站推廣服務(wù)， 按需定制制作由設(shè)計師親自精心設(shè)計，設(shè)計的效果完全按照客戶的要求，并適當?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

案例分析

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

（1）position：定位

relative：相對定位

absolute：絕對定位

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

visible ：背面是可見的

hidden：背面是不可見的

（3）z-index 屬性

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

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

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

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

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

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

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

linear：勻速

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

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

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

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

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

注意瀏覽器兼容問題

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

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