成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css3怎么實現(xiàn)翻轉(zhuǎn)效果

這篇文章將為大家詳細(xì)講解有關(guān)css3怎么實現(xiàn)翻轉(zhuǎn)效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站從2013年開始,先為河?xùn)|等服務(wù)建站,河?xùn)|等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為河?xùn)|企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

css3實現(xiàn)翻轉(zhuǎn)效果的方法:1、將外層元素設(shè)置perspective;2、將第二包裹層翻轉(zhuǎn)180度,同時設(shè)置過渡速度;3、設(shè)置“backface-visibility”;4、設(shè)置“z-index”屬性;5、讓“back”最開始就翻轉(zhuǎn)180度。

CSS3實現(xiàn)翻轉(zhuǎn)(Flip)效果

今天,我們用比較簡潔的CSS3來實現(xiàn)翻轉(zhuǎn)效果。

動畫效果

css3怎么實現(xiàn)翻轉(zhuǎn)效果

css3怎么實現(xiàn)翻轉(zhuǎn)效果

效果分析

當(dāng)鼠標(biāo)滑過包含塊時,元素整體翻轉(zhuǎn)180度,以實現(xiàn)“正”“反”面的切換。

HTML分析

分析:.container.flip為了實現(xiàn)動畫效果做準(zhǔn)備。.front,.back各包裹一張圖片。
實現(xiàn)該效果的HTML如下:

<p class="container">
    <p class="flip">
        <p class="front">
            <img src="images/pic00.jpg" alt="">
        </p>
        <p class="back">
            <img src="images/pic01.jpg" alt="">
        </p>
    </p>
</p>

CSS分析

1. 元素布局

為了實現(xiàn)以上效果,先進行元素布局。給.front,.back相對.flip進行絕對定位,讓他們在相同位置重疊。
布局部分代碼如下:

    .container,.front,.back{width:380px;height:270px;}
    .flip{position:relative;}
    .front,.back{position:absolute;top: 0px;left: 0px;}

設(shè)置之后我們發(fā)現(xiàn).back的圖片在.front的上面,因此給.front設(shè)置.fornt{z-index:2;}

注意:不要為了防止元素溢出設(shè)置overflow屬性,這將導(dǎo)致3D效果無法實現(xiàn)。

w3 spec中描述:

The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore force the used value of transform-style to flat:

  • overflow: any value other than visible.

  • opacity: any value less than 1.

  • filter: any value other than none.

  • clip: any value other than auto.

2. 動畫效果的實現(xiàn)

(1) 為了實現(xiàn)動畫效果首先給祖先元素.container,.flip設(shè)置以下屬性,以觸發(fā)3d效果和設(shè)置動畫:

.container{perspective:1000;transform-style:preserve-3d;}
.flip{transition:0.6s;transform-style:preserve-3d;}

(2)接著,為了讓圖畫翻轉(zhuǎn)時不露出背面,給.front,.back設(shè)置backface-visibility屬性:
.front,.back{backface-visibility:hidden;}

(3)為了讓鼠標(biāo)滑過包含塊時,包含塊翻轉(zhuǎn)180度,以實現(xiàn)“正”“反”面的切換。給背面的元素設(shè)置transform:rotateY(-180deg),這時我們將無法看到.back。

(4)最后,當(dāng)用戶的鼠標(biāo)滑過.container包含塊時,.flip翻轉(zhuǎn)180度,這樣,.front翻轉(zhuǎn)180度,由于背面是hidden,無法看見;而.back翻轉(zhuǎn)180度后,回到0度,以正面示人,這樣我們就能看到背面了。

代碼如下:

    .container{perspective:1000;transform-style:preserve-3d;}
    .container,.front,.back{width:380px;height:270px;}
    .flip{position:relative;transition:0.6s;transform-style:preserve-3d;}
    .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;}
    .front{z-index:2;}
    .back{transform:rotateY(-180deg);}
    .container:hover .flip{transform:rotateY(180deg);}

垂直翻轉(zhuǎn)效果實現(xiàn)

垂直效果與水平翻轉(zhuǎn)異曲同工。但是如果你只是把rotateY換成rotateX,那么你會發(fā)現(xiàn)圖片是以頂部的那條線翻轉(zhuǎn)的。
請注意:在上面的CSS代碼中,我并未給.flip設(shè)置寬高,所以當(dāng)給.flip應(yīng)用transform:rotateY(180deg)時,按照默認(rèn)的transform-origin值,是以元素的中心點為基本點翻轉(zhuǎn)的。這里.flip的高度是0,所以當(dāng)然是以頂部的那條線為基礎(chǔ)翻轉(zhuǎn)。所以解決的辦法有二:

  1. .flip設(shè)置和.front,.back相同的寬高。

  2. .flip設(shè)置transform-origin:100% 135px/*高度的一半*/屬性。
    OK,這樣你就會發(fā)現(xiàn)垂直翻轉(zhuǎn)是你想要的效果了!

總結(jié)

1. 思路

(1)最外層元素設(shè)置perspective以實現(xiàn)3D效果。
(2)當(dāng)鼠標(biāo)滑過最外層元素時,第二包裹層翻轉(zhuǎn)180度,同時設(shè)置過渡速度。
(3)兩個翻轉(zhuǎn)塊絕對定位,以致實現(xiàn)相同位置的疊加。同時設(shè)置backface-visibility避免在實現(xiàn)動畫效果時露出背面。
(4)給.front設(shè)置z-index屬性使它在寫代碼和展示時都在前面。
(5)讓.back最開始就翻轉(zhuǎn)180度,以背面示人。

2. 遇到的問題:

(1)為了讓兩個尺寸不一的圖片在包裹塊中大小一致,使用了overflow屬性,無法實現(xiàn)3d效果。解決方法:給img設(shè)置width:100%;height:100%;
(2)沒有意識到.flip的高度為0,所以在垂直翻轉(zhuǎn)時標(biāo)準(zhǔn)點錯誤導(dǎo)致效果不一樣。
(3)多寫才能發(fā)現(xiàn)多的錯誤,才知道怎么找錯誤,怎么解決錯誤。

關(guān)于“css3怎么實現(xiàn)翻轉(zhuǎn)效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

標(biāo)題名稱:css3怎么實現(xiàn)翻轉(zhuǎn)效果
分享地址:http://jinyejixie.com/article10/iejido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗、微信公眾號、小程序開發(fā)云服務(wù)器、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)
尤溪县| 富宁县| 柯坪县| 青海省| 天全县| 张掖市| 罗定市| 通海县| 纳雍县| 民权县| 江源县| 维西| 门头沟区| 庐江县| 张掖市| 江西省| 达日县| 黄山市| 沙坪坝区| 华容县| 饶河县| 平武县| 永靖县| 柘荣县| 会昌县| 灵宝市| 靖西县| 灌阳县| 凭祥市| 西华县| 武宣县| 阳朔县| 宜章县| 潮州市| 新安县| 龙南县| 唐山市| 留坝县| 清远市| 通化市| 喀什市|