CSS+JavaScript 实现翻牌效果，详细教程!

最新推荐文章于 2025-09-10 08:46:14 发布

原创最新推荐文章于 2025-09-10 08:46:14 发布 · 564 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

部署运行你感兴趣的模型镜像

实现思路：

1.首先准备一个两个dom,分别为命名正面和反面

2.css设置俩dom隐藏反转后的面backface-visibility: hidden;

3.js判断当前点击的dom的transform是否为rotateY(180deg)反转180，不是则反转，是则改为不反转

主要知识点：

css

backface-visibility: hidden

解释：

backface-visibility: visible;（默认值）：背面是可见的，当元素翻转时，背面的内容会显示出来。
backface-visibility: hidden;：背面不可见，翻转后的背面被隐藏，只有正面会在视图中显示。

transform-style: preserve-3d

transform-style: preserve-3d; 使得一个元素的子元素保持在 3D 空间中进行渲染，从而允许这些子元素应用 3D 转换（如旋转、平移等）。
如果没有这个属性或者使用了 transform-style: flat;(flat为默认值)，子元素会被转换到 2D 平面上，无法产生 3D 效果。

代码实现：

准备三个文件，分别为index.html ,style.css ,script.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻牌效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card" onclick="flipCard(this)">
            <div class="card-inner">
                <div class="card-front">
                    <p>正面</p>
                </div>
                <div class="card-back">
                    <p>背面</p>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.card-container {
    perspective: 1000px; /* 给容器添加透视效果 */
}

.card {
    width: 200px;
    height: 300px;
    cursor: pointer;
    transform-style: preserve-3d; /* 保持3D效果 */
    transition: transform 0.6s; /* 翻转动画的时间 */
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s; /* 翻转的平滑效果 */
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
	/* 隐藏翻转后的面 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}

.card-front {
    background-color: #4caf50; /* 正面背景 */
}

.card-back {
    background-color: #f44336; /* 背面背景 */
    transform: rotateY(180deg); /* 背面翻转180度 */
}

script.js

function flipCard(card) {
    const cardInner = card.querySelector('.card-inner');
    cardInner.style.transform = cardInner.style.transform === 'rotateY(180deg)' ? '' : 'rotateY(180deg)';
}

您可能感兴趣的与本文相关的镜像