css3實現翻牌效果

豆豆大魔王發表於2017-12-14
CSSS3

前陣子做了一個專案的前端網站，客戶需求是要實現滑鼠懸停的翻牌效果，經過溝通後確定了使用css3來實現此效果，接下來分享一下具體的實現方式。 效果演示

程式碼如下 HTML

        <div class="slide-items">
            <div class="slide-item">
                <div class="front1 front">我要看</div>
                <ul class="back">
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                    <li class="short-link"><a href="#">地圖引導</a></li>
                    <li class="long-link"><a href="#">國稅涉稅事項網上辦理</a></li>
                    <li class="long-link"><a href="#">地稅涉稅事項網上辦理</a></li>
                </ul>
            </div>
            <div class="slide-item">
                <div class="front2 front">我要查</div>
                <ul class="back back-item2">
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                </ul>
            </div>
            <div class="slide-item">
                <div class="front3 front">我要辦</div>
                <ul class="back back-item3">
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                    <li class="short-link"><a href="#">辦件查詢</a></li>
                </ul>
            </div>
            <div class="slide-item">
                <div class="front4 front">我要問</div>
                <ul class="back back-item4">
                    <li class="short-link"><a href="#">諮詢</a></li>
                    <li class="short-link"><a href="#">投訴</a></li>
                </ul>
            </div>
        </div>
複製程式碼

css

.slide-area {
        height: 158px;
        border-top: 5px solid #0066c3;
        margin-top: 94px;
    }
    
    .slide-item {
        position: relative;
        width: 200px;
        height: 81px;
        float: left;
        margin-top: 36px;
        margin-left: 39px;
    }
    
    .front,
    .back {
        position: absolute;
        display: block;
        -webkit-transition: all 1s ease-in-out;
        /*淡入淡出效果*/
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        -webkit-backface-visibility: hidden;
        /*元素背面不可見*/
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .front {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 100%;
        width: 116px;
        padding-left: 84px;
        text-align: center;
        line-height: 81px;
        background-color: #f67300;
    }
    
    .front2 {
        background-color: #f67;
    }
    
    .front3 {
        background-color: #d28;
    }
    
    .front4 {
        background-color: #c50;
    }
    
    .back {
        width: 198px;
        height: 76px;
        border: 1px solid #0a6caa;
        border-radius: 5px;
        padding-top: 3px;
        background-color: #fff;
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    
    .slide-item:hover .front {
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    
    .slide-item:hover .back {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
複製程式碼

從上面的示例中我們可以看出，主要使用的css3屬性包括transition、backface-visibility、transform。 接下來我們逐個分析： ##transition: transition用來規定元素在產生動畫效果時的設定，主要包括四個屬性

  1. transition-property 規定設定過渡效果的 CSS 屬性的名稱。
  2. transition-duration 規定完成過渡效果需要多少秒或毫秒。
  3. transition-timing-function 規定速度效果的速度曲線。
  4. transition-delay 定義過渡效果何時開始。 示例中我們使用了簡寫的方式，設定的效果為，back和front元素的所有屬性產生的動畫效果時的時長為1s，效果為淡入淡出。

##backface-visibility： backface-visibility 屬性定義當元素不面向螢幕時是否可見。從頁面結構不難看出，每個翻轉元素都包含了正面和反面兩個div塊，其中一塊正面 對著螢幕，另一塊背面對著螢幕，而backface-visibility 屬性就是用來定義讓背對著螢幕的元素設為不可見。

##transform： transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 示例中，我們將back元素的初始位置以y軸翻轉180度，也就是背對著螢幕，並被backface-visibility元素設為不可見，已達到隱藏效果，當滑鼠懸停時，正面的元素翻轉180度，背面元素由翻轉180度變為翻轉0度，因為設定了transition屬性，所以會產生翻轉卡片的效果，且翻轉後，到達北面的元素又被backface-visibility設為不可見，至此，一個簡單的卡片翻轉效果就完成了。 當然，這樣的寫法也有缺點，相容性比較差，只能相容到（ie10）,如果在工作中遇到此類需求，在做之前務必要先確定相容需求再決定使用哪種方案。

同志們如果對css3屬性有不清楚的，可在w3c或菜鳥教程上查詢，翻牌效果就介紹到這裡，歡迎指正。

相關文章