求助：如何用HTML/CSS/JS实现3D顺时针旋转立方体？解决居中问题

针对你遇到的立方体无法居中、缺少旋转效果的问题，我们可以通过调整CSS布局和添加CSS动画来解决，全程不需要JavaScript。下面是修改后的完整代码和关键说明：

修改后的完整代码 #

CSS部分 #

body {
  background-color: black;
  color: lime;
  font-family: "Courier New";
  /* 让body占满整个视口高度，并用flex布局居中子元素 */
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 给3D元素添加透视效果，作用于立方体的父容器 */
  perspective: 800px;
}

.cube {
  /* 立方体容器尺寸和单个面一致 */
  width: 200px;
  height: 200px;
  /* 开启3D变换上下文，让子元素继承3D空间 */
  transform-style: preserve-3d;
  /* 添加顺时针旋转动画 */
  animation: rotateCube 8s linear infinite;
  /* 设置相对定位，让绝对定位的面相对于容器定位 */
  position: relative;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid lime;
  box-sizing: border-box;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  /* 给每个面添加半透明，方便看到3D效果 */
  background-color: rgba(0, 0, 0, 0.8);
}

.front {
  transform: rotateY(0deg) translateZ(100px);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

/* 定义顺时针旋转的动画关键帧 */
@keyframes rotateCube {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

HTML部分（无需修改） #

<div class="cube">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face top">3</div>
  <div class="face bottom">4</div>
  <div class="face left">5</div>
  <div class="face right">6</div>
</div>

关键修改说明 #

• 页面居中实现：给body设置min-height: 100vh确保占满屏幕高度，配合display: flex、justify-content: center、align-items: center，直接把立方体容器垂直水平居中，这是最简单的居中方式。
• 3D透视修正：把perspective从.cube移到body上——透视效果需要作用在3D元素的父容器，这样立方体的各个面才能呈现正确的空间关系。
• 立方体容器定位：给.cube设置position: relative和固定宽高，让绝对定位的各个面能相对于容器正确摆放，不会乱跑。
• 旋转动画添加：用@keyframes定义一个从0到360度的旋转动画，给.cube添加animation属性实现无限循环的顺时针旋转，同时加入X轴旋转让效果更立体，你可以调整rotateX的值或者动画时长来改变效果。
• 面的优化：给每个面加了半透明背景，这样旋转时能看到后面的面，3D效果更明显。

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