css3如何實(shí)現(xiàn)3d翻轉(zhuǎn)效果

今天小編給大家分享的是css3如何實(shí)現(xiàn)3d翻轉(zhuǎn)效果，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

什么是css

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

在css3中，可以使用transform屬性配合rotateY()、rotateX()等3d旋轉(zhuǎn)函數(shù)來(lái)實(shí)現(xiàn)3d翻轉(zhuǎn)效果。rotateX()可以使元素繞其X軸旋轉(zhuǎn)給定角度，rotateY()可以使元素繞其Y軸旋轉(zhuǎn)給定角度。

一、實(shí)現(xiàn)一張圖片的翻轉(zhuǎn)

1、HTML結(jié)構(gòu)

<div class="stage">
    <div class="flipBox">
        <figure class="pic front">Front</figure>
        <figure class="pic back">Back</figure>
    </div>
</div>

上述HTML的結(jié)構(gòu)是：

• p.stage規(guī)定了一個(gè)3D舞臺(tái)，基本上所有使用CSS3 3D變換的實(shí)現(xiàn)都會(huì)這么做，規(guī)定perspective樣式從而達(dá)到透視效果

• p.flipBox是真正實(shí)現(xiàn)翻面的容器，稍后將對(duì)它進(jìn)行3D變換

• figure代表兩張圖片，一張是正面，一張是背面

思路是：將figure.front和figure.back作為翻轉(zhuǎn)圖片的正反面。圖片翻轉(zhuǎn)后，figure.back將變成面對(duì)用戶的那一面，figure.front將背對(duì)用戶。

初始狀態(tài)下figure.back是水平翻轉(zhuǎn)過(guò)的（即transform: rotateY(180deg)），這樣圖片翻轉(zhuǎn)后背面的文字將正著顯示（否則翻轉(zhuǎn)過(guò)來(lái)以后背面的文字是倒著的——因?yàn)榉崔D(zhuǎn)之前是正著的嘛~）。

3、CSS結(jié)構(gòu)

body,figure {
    margin: 0;
    padding: 0;
}
.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    background: #f00;
}
.back {
    background: #090;
    transform: rotateY(180deg);
}

現(xiàn)在分析每個(gè)元素的CSS：

body,figure {
    margin: 0;
    padding: 0;
}

沒(méi)什么好說(shuō)的，去掉內(nèi)外邊距！

.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}

為3D舞臺(tái)定義樣式。margin是為了距離瀏覽器左邊和上邊有一些距離，讓變換顯示的更完整。perspective規(guī)定了3D元素距攝像機(jī)（或人眼）的距離，值越小3D元素離人眼越近，值越大3D元素離人眼越遠(yuǎn)。

.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

為翻轉(zhuǎn)盒子定義樣式。這個(gè)元素是真正進(jìn)行3D變換的元素。其position屬性是為其兩個(gè)子figure元素創(chuàng)造定位點(diǎn)，以便兩個(gè)子figure元素定位到p.flipBox的左上角實(shí)現(xiàn)兩張圖片的對(duì)齊。transform-style屬性是必須的，這規(guī)定了p.flipBox元素的后代元素是以哪種形式進(jìn)行3D變換（preserve-3d表示后代元素任然以3d的模式進(jìn)行變換；另一個(gè)值flat表示只對(duì)p.flipBox進(jìn)行3D變換，后代元素則只是p.flipBox平面中的內(nèi)容，不進(jìn)行3D變換），這和After Effect中的偽3D十分相似。transition規(guī)定只變換transform屬性，時(shí)間為1s.

.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

為兩張圖片（這里的兩個(gè)figure）規(guī)定統(tǒng)一的樣式。使用絕對(duì)定位，定位到p.flipBox的左上角，而兩個(gè)figure的大小又是一樣的，所以完美重疊。backface-visibility是一個(gè)重要的屬性，它規(guī)定背對(duì)用戶的3D元素是否顯示，這里應(yīng)該規(guī)定為不顯示（hidden），否則不該顯示背面的時(shí)候背面會(huì)顯示出來(lái)。比如初始狀態(tài)，顯然不應(yīng)該顯示figure.back，但又因?yàn)閒igure.back是后渲染的，所以會(huì)覆蓋在figure.front上，我們之前為figure.back規(guī)定了transform: rotateY(180deg)，所以figure.front是背對(duì)用戶的，將不顯示。再比如翻轉(zhuǎn)過(guò)后，figure.front會(huì)擋在figure.back前面，不過(guò)此時(shí)figure.front將會(huì)背對(duì)用戶，所以被backface-visibility隱藏了，這正是我們想要的。

.front {
    background: #f00;
}

規(guī)定了圖片正面為紅色。

.back {
    background: #090;
    transform: rotateY(180deg);
}

規(guī)定了圖片背面為綠色，同時(shí)，transform: rotateY(180deg)規(guī)定在初始狀態(tài)，figure.back是水平翻轉(zhuǎn)180°的。

3、開(kāi)始旋轉(zhuǎn)圖片

.stage:hover .flipBox {
 transform: rotateY(-180deg);
}

當(dāng)鼠標(biāo)移入3D舞臺(tái)時(shí)，將p.flipBox旋轉(zhuǎn)-180°，實(shí)現(xiàn)圖片翻轉(zhuǎn)效果。這里讓p.flipBox旋轉(zhuǎn)+180°也是可以的，只是旋轉(zhuǎn)的方向不同罷了。

二、案例

1、圖片準(zhǔn)備

為減少HTTP請(qǐng)求，這里使用精靈圖。

圖片大小為200*200，分上下兩部分，上方為翻轉(zhuǎn)圖片的正面（黑白），下方為翻轉(zhuǎn)圖片的背面（彩色）。上方和下方的logo都經(jīng)過(guò)水平居中和垂直居中，以保證翻轉(zhuǎn)前后logo位置一致。

2、代碼實(shí)現(xiàn)

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Study</title>
    <style>
        html,body,ul,li,a,figure,h5 {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        h5 {
            display: none;
        }
        .Stage {
            width: 604px;
            height: 203px;
            margin: 50px;
            border-left: 1px solid #f5f5f5;
            border-top: 1px solid #f5f5f5;
            perspective: 10000px;
        }
        .trigger {
            display: block;
            float: left;
            width: 200px;
            height:100px;
            border-right: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            position: relative;
        }
        .flipBox {
            display: block;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1.2s;
            transition-delay: 0.03s;
        }
        .trigger:hover .flipBox {
            transform: perspective(10000px) rotateY(-180deg);    /*這里的perspective為每個(gè)flipBox規(guī)定單獨(dú)的視點(diǎn)距離，解決Chrome中統(tǒng)一視點(diǎn)的問(wèn)題*/
        }
        .plane {
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .back {
            transform: rotateY(180deg);
        }
        .logo1 figure.front {
            background: url("pic.png") center 0 no-repeat;
        }
        .logo2 figure.front {
            background: url("pic_2.png") center 0 no-repeat;
        }
        .logo3 figure.front {
            background: url("pic_3.png") center 0 no-repeat;
        }
        .logo4 figure.front {
            background: url("pic_4.png") center 0 no-repeat;
        }
        .logo5 figure.front {
            background: url("pic_5.png") center 0 no-repeat;
        }
        .logo6 figure.front {
            background: url("pic_6.png") center 0 no-repeat;
        }
        .logo1 figure.back {
            background: url("pic.png") center -100px no-repeat;
        }
        .logo2 figure.back {
            background: url("pic_2.png") center -100px no-repeat;
        }
        .logo3 figure.back {
            background: url("pic_3.png") center -100px no-repeat;
        }
        .logo4 figure.back {
            background: url("pic_4.png") center -100px no-repeat;
        }
        .logo5 figure.back {
            background: url("pic_5.png") center -100px no-repeat;
        }
        .logo6 figure.back {
            background: url("pic_6.png") center -100px no-repeat;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <a class="flipBox logo1" href="#">
                <h5>Fun Games</h5>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo2" href="#">
                <h5>Man Style</h5>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo3" href="#">
                <h5>Sims.</h5>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo4" href="#">
                <h5>Googla</h5>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo5" href="#">
                <h5>JavaScript</h5>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo6" href="#">
                <h5>Felix</h5>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

關(guān)于css3如何實(shí)現(xiàn)3d翻轉(zhuǎn)效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。