CSS 3D透视卡片翻转时右侧卡片重叠问题求助

安全阿岳

2026-8-21

解决方案

核心问题分析

你遇到的问题是多3D堆叠上下文冲突，以及HTML规范错误导致的样式计算异常。z-index在3D变换场景下优先级低于元素在3D空间中的实际位置，而且重复的ID会导致浏览器无法正确解析样式。

具体修复步骤

移除.card上的perspective，统一3D上下文
同时在body和.card上设置perspective会创建多个独立的3D空间，导致元素堆叠计算混乱。只保留body的perspective即可：

.card{
    /* 删除此行：perspective: 700px; */
    margin: auto 10px;
    width:6em;    
    border: 1px solid white;
    border-radius:0.3em;
    transform: rotateX(45deg);
    transform-style: preserve-3d;
    transform-origin:bottom;
}

修复重复ID问题
HTML中多个元素使用相同的id="cardContents"违反规范，将ID改为类名：

<!-- 把所有id="cardContents"替换为class="cardContents" -->
<div class="card">
    <div class="cardContents cardContents1">
        ...
    </div>
</div>

同步修改CSS选择器：

.cardContents{
    position: relative;
    width: 6em;
    height: 8em;
    border-radius:0.3em;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    transform-origin:bottom;
}

.card:hover .cardContents{
    transform: rotateX(-37deg) translateZ(50px) rotateY(180deg) translateY(-40px);
}

hover时提升卡片的堆叠层级
给.card添加position: relative，并在hover时设置更高的z-index，确保当前交互的卡片在最上层：
```
.card{
    position: relative;
    /* 原有样式保留 */
}

.card:hover{
    z-index: 10;
}
```
调整translateZ值避免过度偏移
原translateZ(100px)会让卡片在3D空间中过度靠前，适当减小值可以避免超出预期的重叠：
```
.card:hover .cardContents{
    transform: rotateX(-37deg) translateZ(50px) rotateY(180deg) translateY(-40px);
}
```