图书馆项目中CSS应用DOM后样式表现异常的原因排查

我来帮你定位问题所在——不是DOM动态生成的方式本身影响CSS执行，而是你的JS代码里有两个关键细节错误，直接导致了透视效果丢失：

1. 类名不匹配，丢失透视基础 #

静态HTML里的容器类是book-container（短横线分隔），但你在JS里给动态生成的容器加的类是bookContainer（驼峰命名）：

// 错误：类名和CSS选择器不一致
bookContainer.classList.add("bookContainer");

CSS中.book-container的perspective: 600px是实现3D透视效果的核心基础——父元素的perspective属性会为子元素的3D变换提供透视空间。由于类名不匹配，这个属性根本没有被应用到动态生成的容器上，子元素的transform-style: preserve-3d自然无法发挥作用。

2. innerHTML覆盖子元素，丢失封面结构 #

你在JS里先创建了img元素并添加到newVolume，紧接着执行了：

newVolume.innerHTML = "TEST";

这行代码会完全清空newVolume内部的所有子元素（包括刚创建的img），替换成文本"TEST"。而CSS中.volume > :first-child选择器是用来渲染书籍黄色封面的关键元素，现在这个元素不存在了，只剩下volume本身的矩形，再加上之前透视属性失效，自然就只能显示普通矩形。

修复方案 #

第一步：修正类名 #

把JS里的容器类名改成和CSS一致的book-container：

bookContainer.classList.add("book-container");

第二步：避免覆盖子元素 #

不要用innerHTML替换内容，改用textContent或者创建文本节点添加，同时保留封面元素（如果需要img就保留，不需要可以换成div）：

function render() {
  const bookContainer = document.createElement("div");
  bookContainer.classList.add("book-container"); // 修正类名
  const newVolume = document.createElement("div");
  newVolume.classList.add("volume");
  bookContainer.appendChild(newVolume);
  
  // 创建封面元素（对应CSS里的.volume > :first-child）
  const cover = document.createElement("div"); // 或者用img，设置src属性
  newVolume.appendChild(cover);
  
  // 添加文本，不覆盖子元素
  const textNode = document.createTextNode("TEST");
  newVolume.appendChild(textNode);
  // 如果想让文本显示在封面上，把文本节点添加到cover里
  // cover.textContent = "TEST";
  
  libraryContainer.appendChild(bookContainer);
};
render();

可选优化 #

如果不需要img元素，可以直接创建一个div作为封面，这样更贴合CSS的选择逻辑，也能避免不必要的元素。

修复这两个问题后，动态生成的书籍就能和静态HTML一样，呈现出带透视效果的平行四边形样式了。

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