css3实现翻牌效果-CSDN博客

前阵子做了一个项目的前端网站，客户需求是要实现鼠标悬停的翻牌效果，经过沟通后确定了使用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用来规定元素在产生动画效果时的设置，主要包括四个属性

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
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或菜鸟教程上查询，翻牌效果就介绍到这里，欢迎指正。