CSS立方体样式不生效：是否调用了错误的ID或类？

你的HTML结构里的ID和CSS选择器匹配完全正确，选择器写法没问题，核心问题出在3D变换的关键属性缺失和变换参数错误：

核心问题点 #

• 父容器#cube缺少transform-style: preserve-3d属性，这是让子元素继承3D空间的必要条件，没有它，所有子元素的3D变换都会被扁平化处理，导致立方体无法成型。
• 立方体各个面的transform参数计算错误：你的立方体边长为400px，每个面到中心的距离应该是200px（边长的一半），原代码的偏移值和旋转逻辑存在偏差，导致面的位置错乱。
• 未给立方体面设置背景色或边框，多个面重叠时无法区分，看起来像样式没生效。

修复后的代码 #

CSS部分 #

div#cube {
  height: 400px;
  width: 400px;
  margin: 180px auto 150px auto;
  position: relative;
  transform: perspective(800px); /* 增大透视值，3D效果更自然 */
  transform-style: preserve-3d; /* 关键：开启子元素3D空间继承 */
}

div.cube_face {
  position: absolute;
  height: 400px;
  width: 400px;
  border: 2px solid #333; /* 加边框区分不同面 */
  box-sizing: border-box; /* 边框不占用额外尺寸 */
  background-color: rgba(255,255,255,0.8); /* 半透明白底，避免完全遮挡下层内容 */
}

div#cube_front {
  transform: translateZ(200px); /* 前面向外偏移200px（边长的一半） */
}

div#cube_left {
  transform: translateX(-200px) rotateY(90deg);
  transform-origin: right center; /* 绕右侧边缘旋转，确保位置正确 */
}

div#cube_right {
  transform: translateX(200px) rotateY(-90deg);
  transform-origin: left center; /* 绕左侧边缘旋转 */
}

div#cube_top {
  transform: translateY(-200px) rotateX(-90deg);
  transform-origin: bottom center; /* 绕底部边缘旋转 */
}

div#cube_bottom {
  transform: translateY(200px) rotateX(90deg);
  transform-origin: top center; /* 绕顶部边缘旋转 */
}

HTML部分（结构正确，无需修改） #

<section id="center">
  <div id="cube">
    <div id="cube_bottom" class="cube_face">
      <h1>The 15th Annual Chupacabra Music Festival</h1>
    </div>
    <div id="cube_top" class="cube_face">
      <p>Snow Storm Pilot <span>-</span> Ivory Elephants <span>-</span> Laureen Torres
        <span>-</span> Little Mouse <span>-</span> Sheila G <span>-</span> Tachyon Pulse
        <span>-</span> Falstaff Ergo <span>-</span> The Roes <span>-</span> Porter Dew
        <span>-</span> MLTPLX <span>-</span> Smoke Ring <span>-</span> James Po
        <span>-</span> Kate Belle <span>-</span> Ian Mann <span>-</span> Back to the Front
        <span>-</span> Codfish <span>-</span> The Chromatones <span>-</span> Fiona Bennett
        <span>-</span> Crop Circles <br /> &amp; MORE!!!! </p>
    </div>
    <div id="cube_left" class="cube_face">
      <img src="cf_photo1.png" alt="" />
    </div>

    <div id="cube_right" class="cube_face">
      <img src="cf_photo2.png" alt="" />
    </div>

    <div id="cube_front" class="cube_face">
      <img src="cf_photo3.png" alt="" />
    </div>
  </div>
</section>

补充说明 #

• ID与类的区别：ID是页面唯一标识，一个元素只能用一个ID，且页面内不能重复；类是可复用的样式标识，可给多个元素添加。你的代码中每个立方体面的ID都是唯一的，用#cube_front这类选择器完全合规，之前修改选择器无效是因为问题不在选择器本身。
• transform-origin：设置旋转原点是为了让面绕正确的边缘旋转，避免位置偏移，这是立方体定位准确的关键。

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