實例詳解css3特效之3D翻牌效果-css教學-PHP中文網

首頁

web前端

css教學

實例詳解css3特效之3D翻牌效果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:03 PM

這篇文章主要介紹了css3特效之3d翻牌效果，有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你有所幫助！

最近一直在學css3，發現他真的是越來越牛逼。現在的css3已經不在是以前的css了，它能做出的功能效果是我們沒辦法想的了。它可以實現flash，可以製作一些js能做出來的效果,還可以寫出ps做出來的一些漸變啊圓角啊陰影啊什麼的效果，如此之炫的它，我相信已經有很多人對它做更深的研究了吧，哈哈，今天我也在小小的研究了下它，主要是關於它的一些3d效果，對於3d本人一直都不是不清不楚的，今天有時間就剛好好好學習下。

所謂的3d翻牌效果，其實就是兩張圖片，一張在前，一張在後，當前面的那張發生旋轉後，轉到一定角度時後面的圖片就會跟著它的步伐一起旋轉，只是一個旋轉到看不見，而一個剛要轉的我們看的見。是不是很心急，那就快來跟我一起學習吧，哈哈~@@@

首先，我們在html中有一個佈局：

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>

登入後複製

不要小看外面那個p，它可是本次內容必不可少的呢，沒了它，後面的效果就沒法實現了呢!局布好了，接下來就要開始搞樣式了。最先要搞的肯定是外面的哈，給它一個width,height,大少各位大神自己定吧，小妹我這就先給它定個200*200吧。外面的搞定了，裡面的也要開始了，這裡都是給200*200。此時在瀏覽器中一看發現p1和p2是上下顯示的，一個上一個下，這就對了，要知道p是塊元素，它要佔據一整行的呢，但這對我們之前說的前後一定是有矛盾的，不要急，給它一個絕對定位position: absolute;這樣兩個p的中心就重合啦。為了區別兩個p,這裡我們要分別給它們不一樣的背景色。前期準備工作都差不搞定了，接下來我們來看看怎麼樣實現效果吧！

我們是要實現翻牌效果，一聽就知道一定是要有旋轉的，這就要用到css3裡的新屬性transform:rotatey(?deg);有人有可能會問為什麼是rotatey呢，這你就不知道了吧，翻牌，當然是沿著y軸轉啊，哈哈！所以當滑鼠移到p上時我們就要讓它實現旋轉效果，那麼此時外層p的用處就來啦，不管用哪個小p都無法讓它們同時發生旋轉，除非我們的滑鼠是點在外面那個p上，於是就有這個代碼了，

.outer:hover .p1{
            transform:rotatey(-180deg);
        }
        .outer:hover .p2{
            transform:rotatey(0deg);
        }

登入後複製

旋轉是有了，可是沒有任何過渡效果的旋轉看起來是很難看的，所以在這裡，我們要給它們一個過渡效果，就要用到css3裡的新屬性transition:all 2s;此處的all是它所有的效果都過渡。講到這裡我們其實一直都沒處理一件事，那就是怎麼讓當前面的旋轉到後面，後面的緊跟其後出現，這就是backface-visibility:hidden;一個在圖片變換裡很重要的一個屬性，它的意思是當圖片轉到顯示器看不見的地方就消失了。就是說本來是正面的，我們能看麼到，但是當它沿著y軸轉180度後我們就不能看到它了，如果不加這個屬性我們是能看到旋轉後的反圖片的，加了它就看不到了。所以我們要把這個屬性加到兩個小p上。而且為了達到這個效果，我們在開始的時候還得讓兩個小p一個沒有旋轉，我們能看到，另一個也就是在背後的那個放180度，這樣當第一個p 開始旋轉後我們就不會立即看到第二個p，而是等它旋轉到看不到的地方，第二個p 才會出現。具體程式碼如下：

<html><head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        .outer{
           width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .outer p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>

登入後複製

以上就是這篇文章的主要內容，希望能夠幫助大家。

【相關教學推薦】

1. css影片教學
2. css線上手冊
3. bootstrap教學

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn