Chrome中CSS 3D翻书（翻转卡片）效果异常问题求助

我之前也碰到过Chrome这个3D变换的小坑，尤其是处理img这类替换元素的时候。你遇到的问题核心在于Chrome对直接应用复杂变换的img元素，backface-visibility: hidden的处理逻辑和Firefox不一致——它有时候不会正确识别初始状态下背面应该被隐藏。

问题原因分析 #

Chrome对于替换元素（比如图片、视频）的3D渲染优先级和普通块级元素不同，当你直接给img.book-cover-back同时设置rotateY(180deg)和translateZ(30px)时，浏览器可能会忽略backface-visibility: hidden的规则，导致初始状态下背面封面跑到前景。

解决方案 #

正如你提到的思路，把img.book-cover-back放进一个额外的div容器里，让容器来承担变换和backface隐藏逻辑，就能让Chrome正确识别。具体步骤如下：

1. 修改HTML结构，给背面封面添加一个容器div
2. 调整CSS，将原来应用在img上的变换和backface属性移到容器上，移除img自身的变换

修改后的代码 #

HTML代码

<div class="book">
  <div class="book-wrapper">
    <img class="book-cover-front" src="...">
    <img class="book-spine" src="...">
    <div class="book-cover-back-container">
      <img class="book-cover-back" src="...">
    </div>
  </div>
</div>

CSS代码

.book {
  width: 399px;
  height: 571px;
  -webkit-perspective: 2636px;
  perspective: 2636px;
}
.book-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform ease-out 2.6s;
}
.book:hover .book-wrapper {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.book-cover-front, .book-spine, .book-cover-back-container {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.book-cover-front, .book-cover-back {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: 100%;
}
.book-cover-back-container {
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(180deg) translateZ(30px);
  -ms-transform: rotateY(180deg) translateZ(30px);
  transform: rotateY(180deg) translateZ(30px);
}
.book-spine {
  max-width: 100%;
  width: 30px;
  height: 100%;
  max-height: 100%;
  -webkit-transform: rotateY(-80deg) translateX(-15px);
  -ms-transform: rotateY(-80deg) translateX(-15px);
  transform: rotateY(-80deg) translateX(-15px);
}

为什么这样有效 #

Chrome对块级容器的3D变换和backface-visibility支持更稳定，把图片放进div容器后，容器作为普通块级元素，浏览器会正确应用backface隐藏规则，初始状态下背面容器会被正面封面遮挡，hover时的翻转动画也能和Firefox保持一致。

另外你提到的尺寸属性混乱问题，确实不会导致这个Chrome兼容性问题，可以放心保留现有设置。

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