桌面与移动端点击元素问题：卡片翻转移动端适配故障求助

问题原因 #

1. .box未设置position: relative，导致内部绝对定位的.front和.back相对于上层容器定位，点击背面时无法触发.box的点击事件
2. .back的CSS中存在重复的transform属性，覆盖了透视效果设置

修正后的代码 #

JavaScript

function focusCard(element) {
  element.getElementsByClassName("front")[0].classList.toggle("show");
  element.getElementsByClassName("back")[0].classList.toggle("show");
}

CSS

.box {
  cursor: pointer;
  width: 270px;
  height: 170px;
  position: relative; /* 添加相对定位，确保内部绝对定位元素以它为基准 */
  touch-action: manipulation; /* 优化移动端点击，消除300ms延迟 */
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.front {
  position: absolute;
  width: 270px;
  height: 170px;
  background-color: #778da9;
  transform: perspective(800px) rotateX(0deg); /* 明确初始旋转角度 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s;
  overflow: hidden;
}

.box:hover .front,
.show {
  transform: perspective(800px) rotateX(180deg); /* 保持透视效果 */
}

.back {
  position: absolute;
  width: 270px;
  height: 170px;
  background: #415a77;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s;
  flex-direction: column;
  transform: perspective(800px) rotateX(180deg); /* 合并透视和初始旋转，避免重复属性覆盖 */
}

.box:hover .back,
.show {
  transform: perspective(800px) rotateX(0deg); /* 保持透视效果 */
}

HTML

<div class="container">
  <div class="questions">
    <div>
      <div class="box" onclick="focusCard(this)">
        <div class="front center">
          <h2>Front #1</h2>
        </div>
        <div class="back center">
          <p>Back #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 给.box添加position: relative：让.front和.back的绝对定位基于.box，确保整个卡片区域都能触发点击事件
• 合并.back中的重复transform属性：避免样式冲突，保证透视效果始终生效
• 添加touch-action: manipulation：优化移动端交互，解决点击延迟问题

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