卡片翻转效果问题：如何修复背面图片横向倒置？

你遇到的问题是卡片翻转时背面内容/图片横向倒置，核心原因是翻转逻辑的方向设置错误，以及没有正确初始化背面的状态。下面是具体的修复方案：

问题根源 #

当前代码里，hover时让前后两个面都旋转180deg，而背面没有预先设置反向旋转，导致翻转后背面是倒置的；同时.card重复定义了样式，.back的z-index也干扰了3D层级。

修复步骤及代码 #

1. HTML结构（保持原结构即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Agenvise.in</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="side front"></div>
            <div class="side back">
                <button class="btn">Click me</button>
            </div>
        </div>   
    </div>
</body>
</html>

2. 修改后的CSS核心逻辑

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
.container{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
}

.container::before{
    content: "";
    position: absolute;
    width: 105%;
    height: 105%;
    background: url(images/Dark\ Blue\ and\ Beige\ Simple\ Dark\ Consultancy\ Portfolio\ &\ Resume\ Website\ \(1\).png) center/cover no-repeat;
    filter: blur(5px);
    z-index: -1;
}

/* 合并重复的.card样式，保留正确的3D设置 */
.card{
    padding: 0;
    position: relative;
    color: #fff;
    text-align: center;
    border-radius:16px ;
    backdrop-filter:blur(5px) ;
    transition: transform 1s;
    transform-style: preserve-3d;
    margin: 0 auto;
    width: 50vw; 
    height: calc(50vw/1.57);
}

.card .side {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    backface-visibility: hidden; /* 隐藏背面，保证3D效果 */
    transition: transform 0.6s ease;
}

.card .front {
    background: url(images/FRONT.png) no-repeat center center;
    background-size: cover;
    transform: rotateY(0deg); /* 正面初始状态 */
}

/* 背面初始设置为反向旋转，hover时转回正常角度 */
.card .back {
    background: url(images/a_dark_background_with_a_computer_and_a_.png) no-repeat center center;
    background-size: cover;
    transform: rotateY(-180deg); /* 初始和正面反向，避免翻转后倒置 */
}

/* hover时分离两个面的旋转逻辑 */
.card:hover .front {
    transform: rotateY(180deg); /* 正面旋转隐藏 */
}
.card:hover .back {
    transform: rotateY(0deg); /* 背面旋转显示 */
}

.btn{
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    background: #fff;
    color: #ff01cf;
    padding: 10px 30px;
    border-radius: 30px;
    margin: 30px 0 10px;
}

/* 修正媒体查询错误数值，保留响应式逻辑 */
@media screen and (max-width: 1024px) {
    .container{
        flex-direction: column;
    }
    .card{
        width: 50vw; 
        height: calc(50vw/1.57);
    }
    .card h2{
        font-size: 30px;
    }
    .card p{
        font-size: 16px;
    }
    .btn{
        font-size: 16px;
        padding: 8px 24px;
    }
}

@media screen and (max-width: 768px) {
    .container{
        flex-direction: column;
    }
    .card{
        width: 80vw; 
        height: calc(80vw/1.57);
    }
    .card h2{
        font-size: 34px;
    }
    .card p{
        font-size: 18px;
    }
    .btn{
        font-size: 18px;
        padding: 10px 26px;
    }
}

@media screen and (max-width: 600px) {
    .container{
        flex-direction: column;
    }
    .card{
        width: 80vw; 
        height: calc(80vw/1.57);
    }
    .card h2{
        font-size: 30px;
    }
    .card p{
        font-size: 16px;
    }
    .btn{
        font-size: 16px;
        padding: 8px 24px;
    }
}

关键修复点说明 #

• 给两个面都添加backface-visibility: hidden，保证旋转时不会穿透显示背面
• 让背面初始状态为rotateY(-180deg)，和正面的0deg形成反向，避免翻转后内容倒置
• 修改hover逻辑：正面旋转180deg隐藏，背面旋转0deg显示，实现自然的翻转效果
• 合并重复的.card样式，修正媒体查询中错误的10234px为1024px
• 移除.back的z-index: -1，避免干扰3D层级结构

内容的提问来源于stack exchange，提问作者AkulSharma