CSS 3D翻转组件中rotate与transform: rotate()属性的表现差异

问题根源 #

使用rotate: y 180deg做3D翻转时，视觉上完成了翻转，但DOM层级里正面元素（.flipper__side--front）的z-index:2仍然高于背面元素，导致背面文本被正面元素遮挡，无法选中。而transform: rotateY(180deg)会通过3D变换的层级关系自动处理正反面的交互优先级，所以没有这个问题。

解决方案 #

方案1：翻转时切换正反面的z-index

在容器进入翻转状态时，调整正反面的z-index，让当前显示的背面处于顶层：

/* 修改Option 2的CSS */
.option2 .flipper__inner--flipped {
  rotate: y 180deg;
}
.option2 .flipper__side--back {
  rotate: y 180deg;
}
/* 新增翻转状态下的层级切换 */
.option2 .flipper__inner--flipped .flipper__side--front {
  z-index: 1;
}
.option2 .flipper__inner--flipped .flipper__side--back {
  z-index: 2;
}

原理：通过动态调整z-index，让当前可见的面始终处于DOM层级顶端，确保交互操作能正常触发。

方案2：用pointer-events禁用正面元素的交互

容器翻转后，让正面元素忽略所有指针事件，使交互直接穿透到背面：

/* 修改Option 2的CSS */
.option2 .flipper__inner--flipped {
  rotate: y 180deg;
}
.option2 .flipper__side--back {
  rotate: y 180deg;
}
/* 新增翻转状态下的指针事件设置 */
.option2 .flipper__inner--flipped .flipper__side--front {
  pointer-events: none;
}

原理：pointer-events: none会让元素跳过所有鼠标/触摸事件，此时背面元素就能接收到选中文本、点击等操作。

方案3：调整翻转逻辑（最简洁）

只对容器应用rotate: y 180deg，背面元素默认设置rotate: y 180deg，借助backface-visibility: hidden自动隐藏不可见的面：

/* 重写Option 2的CSS */
.option2 .flipper__side--back {
  rotate: y 180deg;
}
.option2 .flipper__inner--flipped {
  rotate: y 180deg;
}

原理：容器翻转后，正面元素因backface-visibility: hidden被隐藏，背面元素翻转后回到正面显示，此时DOM层级的z-index不会影响交互，因为正面元素已不可见且无遮挡。

完整修改后的代码示例 #

<h2>Option 1: transform: rotate(180deg)</h2>
<div class="flipper option1">
  <div class="flipper__inner">
    <div class="flipper__side flipper__side--front">Front (text is selectable)</div>
    <div class="flipper__side flipper__side--back">Back (text is selectable)</div>
  </div>
</div>

<h2>Option 2: rotate: y 180deg (fixed)</h2>
<div class="flipper option2">
  <div class="flipper__inner">
    <div class="flipper__side flipper__side--front">Front (text is selectable)</div>
    <div class="flipper__side flipper__side--back">Back (text is now selectable)</div>
  </div>
</div>

<br/>

<button>CLICK TO FLIP BOTH FLIPPERS</button>

<script>
const btn = document.querySelector("button");
const flipperInner1 = document.querySelector(".option1 .flipper__inner");
const flipperInner2 = document.querySelector(".option2 .flipper__inner");

btn.addEventListener("click", () => {
  flipperInner1.classList.toggle("flipper__inner--flipped")
  flipperInner2.classList.toggle("flipper__inner--flipped")
})
</script>

<style>
/* COMMON STYLES */
.flipper {
  inline-size: 300px;
  block-size: 100px;
  perspective: 1000px;
}

.flipper__inner {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  border: 1px solid #000;
  transform-style: preserve-3d;
  transition: transform 0.3s, rotate 0.3s;
}

.flipper__side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flipper__side--front {
  z-index: 2;
  background: #fff;
}

.flipper__side--back {
  background: #f0f0f0;
}

/* Option 1: transform: rotate(180deg) */
.option1 .flipper__inner--flipped,
.option1 .flipper__side--back {
  transform: rotateY(180deg);
}

/* Option 2: rotate: y 180deg (fixed with 方案3) */
.option2 .flipper__side--back {
  rotate: y 180deg;
}
.option2 .flipper__inner--flipped {
  rotate: y 180deg;
}
</style>

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