css3 卡牌翻转效果

时间：2020-07-01 13:02:03 收藏：0 阅读：85

利用hover控制动画，一个从反面向正面翻，一个从正面向反面翻。

利用：backface-visibility: hidden;控制反面的元素不显示。

不支持的浏览器直接切换层级换图（部分ie9模拟器不支持）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3双面翻转</title>
</head>
<style>
    *{margin: 0; padding:0;}
    img{
        width: 100%;
        height: 100%;
    }
    .card-content{
        width: 295px;
        height: 295px;
        margin: 0 auto;
    }
    .inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        -webkit-transform: perspective(1000px);
        -moz-transform: perspective(1000px);
        -ms-transform: perspective(1000px);
        -o-transform: perspective(1000px);
        transform: perspective(1000px);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .front, .back{
        width: 100%;
        height: 100%;
        position:absolute;top: 0px;left: 0px;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -o-transition: 0.6s;
        -ms-transition: 0.6s;
        transition: 0.6s;
        cursor: pointer;
    }
    .front {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    .back {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg)
    }
    .card-content:hover .inner .back{
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    .card-content:hover .inner .front { 
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>
<body>
    <div class="card-wrapper">
        <div class="card-content">
            <a class="inner" href="#">
                <div class="front">
                    <img src="./images/mobile_2.jpg" alt="">
                </div>
                <div class="back">
                    <img src="./images/mobile_1.jpg" alt="">
                </div>
            </a>
            <p>这里可以做一些描述的文案</p>
        </div>    
    </div>
</body>
</html>

参考博客：https://www.cnblogs.com/zhidong123/p/4940540.html