css3实现卡牌翻转效果

最新推荐文章于 2025-10-05 16:22:55 发布

原创最新推荐文章于 2025-10-05 16:22:55 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

14 篇文章

订阅专栏

css

12 篇文章

订阅专栏

本文介绍了如何使用纯CSS3实现卡牌的3D翻转效果，当鼠标悬停在卡面上时，卡牌会动态翻转展示另一面。

代码如下，纯css3实现，当鼠标悬浮与卡面上，卡片进行翻转

<style>
    .card-wrapper {
        background-color: transparent; 
        width: 250px;
        height: 350px;
        margin: 0 auto;
        perspective: 1000px;
        -webkit-perspective: 1000px;

    }
    .inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform .5s;
        transform-style: preserve-3d;
    }
    .inner > div {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
    }
    .back {
        transform: rotateY(180deg);
    }
    .card-wrapper:hover .inner {
        transform: rotateY(180deg);
    }
    </style>

<div class="card-wrapper">
        <div class="inner">
            <div class="front">
                <img src="img/front.jpg" alt="">
            </div>
            <div class="back">
                <img src="img/back.jpg" alt="">
            </div>
        </div>    
    </div>