CSS过渡实现书本翻转动画：封面正面透显问题原因及解决咨询

嘿，这个问题我之前做3D翻转动画的时候也碰到过！其实核心原因和解决办法都挺明确的，咱们一步步来拆解：

为什么会出现透显？ #

CSS 3D变换中，元素的背面默认是可见的（backface-visibility属性默认值是visible）。当你的封面正面（蓝色div）翻转到背面时，它的正面并没有消失，而是会透过已经翻转过来的封面背面显示出来，看起来就像透显了。另外，如果承载书本的父元素没有开启3D空间，子元素的3D变换会被扁平化，也可能加剧这个视觉问题。

具体解决步骤 #

1. 给封面元素添加backface-visibility: hidden #

这个属性的作用就是：当元素被翻转到背面时，它的正面会被隐藏，反之亦然。给你的封面正面和封面背面都加上这个属性，就能避免正反两面互相透显。

2. 给书本父元素开启3D空间 #

在承载所有书本元素的父容器上设置transform-style: preserve-3d，确保子元素的3D变换是在同一个3D空间中生效的，不会被浏览器扁平化处理，这能让翻转的层级关系更清晰。

3. 确认翻转原点正确 #

记得给封面元素设置transform-origin为书背的边缘（比如left center），这样翻转动画才会符合真实书本开合的逻辑，也能减少因翻转轴不对导致的视觉异常。

示例代码参考 #

假设你的HTML结构是这样的：

<div class="book-container">
  <div class="book-back"></div>
  <div class="cover front-cover"></div>
  <div class="cover back-cover"></div>
</div>

对应的CSS修正后应该是这样：

.book-container {
  position: relative;
  width: 220px;
  height: 300px;
  /* 开启3D空间，让子元素的3D变换生效 */
  transform-style: preserve-3d;
  /* 可选：添加透视效果，增强3D视觉 */
  perspective: 1000px;
}

.book-back {
  position: absolute;
  left: 0;
  width: 20px;
  height: 100%;
  background-color: #666;
}

.cover {
  position: absolute;
  top: 0;
  left: 20px; /* 对应书背的宽度 */
  width: 200px;
  height: 100%;
  transition: transform 0.6s ease-in-out;
  /* 关键：隐藏元素的背面 */
  backface-visibility: hidden;
  /* 设置翻转原点为书背一侧 */
  transform-origin: left center;
}

.front-cover {
  background-color: blue;
}

.back-cover {
  background-color: #f0f0f0;
  /* 默认让封面背面处于翻转状态 */
  transform: rotateY(180deg);
}

/* 鼠标悬停时触发翻转 */
.book-container:hover .front-cover {
  transform: rotateY(-180deg);
}

这样调整后，你再测试一下，封面正面就不会在翻转时透显到背面啦。

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