css3之3D翻牌效果

時間 2019-11-19

標籤 css3 css 3d 翻牌效果欄目 CSS 简体版

原文原文鏈接

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

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

首先，咱們在html中有這樣一個佈局：html

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

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

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

.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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。