實例詳解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刪除

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingMultatingMultationMultationProperPertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用CombanningWiThjavoFofofofoftofofo

CSS計數器：自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他們可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）創造性