如何用CSS为带透视旋转的图片添加厚度实现书本效果

嘿，要给这个带透视旋转的图片加上书本的立体厚度其实很简单，核心是用伪元素模拟书本侧边，再配合3D变换让它和封面在透视空间里完美贴合。我给你调整了代码，直接就能用：

完整实现代码 #

CSS部分

.thumb {
  perspective: 600px;
  transform-style: preserve-3d; /* 关键：确保子元素的3D变换能继承透视效果 */
}

#cover {
  width: 60%;
  max-width: 300px;
  display: block;
  margin: auto;
  transform: rotateY(45deg);
  box-shadow: -40px 25px 55px 6px #85919d;
  transform-style: preserve-3d;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 用伪元素创建书本侧边 */
#cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px; /* 这里设置书本的厚度，可按需调整 */
  height: 100%;
  background-color: #5a6a7a; /* 侧边颜色，建议和封面阴影色调匹配 */
  transform: rotateY(-90deg) translateZ(-20px); /* 旋转到侧边位置，translateZ值要和厚度一致 */
  box-shadow: inset -5px 0 15px rgba(0, 0, 0, 0.3); /* 内阴影模拟书页缝隙，增强真实感 */
}

HTML部分

<div class="thumb">
  <img id="cover" src="https://..." alt="书本封面">
</div>

关键细节说明 #

• 一定要给.thumb加上transform-style: preserve-3d，不然内部元素的3D变换会被扁平化，侧边的立体效果就出不来了。
• 伪元素的transform: rotateY(-90deg)是把它从正面转成侧面，translateZ(-20px)是让它刚好贴合封面的左侧边缘——这里的数值必须和你设置的厚度（width:20px）一致，不然会错位。
• 侧边的内阴影是个小技巧，能模拟书本侧边的书页层次感，让立体效果更逼真，你可以根据自己的需求调整阴影的深浅和模糊度。

如果想调整厚度，只要同步修改伪元素的width和translateZ的数值就行，颜色也可以根据封面的色调来适配，让整体风格更统一～

内容的提问来源于stack exchange，提问作者Eric Gutiérrez Llopis