css3之3D翻牌效果

 

 

 

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

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

首先，我們在html中有這樣一個布局：

<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

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

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

.outer:hover .div1{
            transform:rotateY(-180deg);
        }
        .outer:hover .div2{
            transform:rotateY(0deg);
        }

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

 

<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 div{
            width:510px;
            height: 340px;
            position: absolute;
            transform-style: preserve-3d;
            backface-visibility:hidden;
            transition:all 2s;

        }
        .div1{
            background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .div2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .div1{
            transform:rotateY(-180deg);
        }
        .outer:hover .div2{
            transform:rotateY(0deg);
        }
    </style>
</head>

<body>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
</body>

</html>