如何使用 CSS 在鼠标悬停时创建 3D 翻转效果

最新推荐文章于 2024-07-24 13:45:34 发布

qq_25153359

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量496

点赞数 17

文章标签： css 3d 前端

本文链接：https://blog.csdn.net/qq_25153359/article/details/139409191

版权

答案:使用 CSS `backface-visibility` 属性

您可以将 CSS backface-visibility 属性与 transform 函数结合使用来创建令人惊叹的翻转和旋转效果，而无需使用任何 JavaScript。

在下面的示例中，有两张图片，一张是扑克牌的正面，另一张是扑克牌的背面。使用 CSS定位 方法将卡片的背面放在正面之上，这样一开始只有卡片的一面是可见的。

当您将光标放在卡片的背面时，它会旋转并显示卡片的正面。前后元素的 backface-visibility 都是 hidden 的，所以翻转后的元素的背面在变换过程中不显示，从而产生 3D 旋转的错觉。让我们尝试一下，了解 3D 翻转的具体工作原理:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>鼠标悬停时的 CSS 3D 旋转</title>
<style>
    .flip-container {
        margin: 50px;
        perspective: 1000;
        display: inline-block;
    }
    .flip-container:hover .card {
        transform: rotateY(180deg);
    }
    .card, .front, .back {
        width: 130px;
        height: 195px;
    }
    .card {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front, .back {
        backface-visibility: hidden;
        position: absolute;
    }
    .front {
        z-index: 1;
        transform: rotateY(180deg);
        background: url("images/card-front.jpg") no-repeat;
    }
    .back {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(0deg);
        background: url("images/card-back.jpg") no-repeat;
    }
</style>
</head>
<body>
    <div class="flip-container">
        <div class="card">
            <div class="front">
                <!-- front side content -->
            </div>
            <div class="back">
                <!-- back side content -->
            </div>
        </div>
    </div>
</body>
</html>

您也可以使用两个不同的 <img> 元素来显示卡片的正面和背面，而不是在 background 中使用它们，但是在开始翻转时您可能会感到有些抽搐，因为图像会需要一些时间才能加载到页面上。查看示例。

注意:只需将 <div> 容器内，以自定义此示例。