如何放大CSS 3D旋转立方体且保持尺寸正常？

我实现了一个纯CSS 3D立方体，初始尺寸为200px×200px时显示正常（半透明规整形态），但调整尺寸后立方体就会变形。尝试过参考现实立方体尺寸和相关技术方案，问题仍未解决。

问题代码 #

body {
  margin: 0;
  width: 100%;
  /*border: 1px solid orange;*/
}

.wrap {
  margin: 0 100px;
  perspective: 800px;
  perspective-origin: 50% 100px;
  /*border: 1px solid red;*/
  width: 100%;
  height: 300px;
  margin: 0;
  margin-top: 50px;
}

.cube {
  position: center;
  margin: 5 auto;
  width: 500px;
  transform-style: preserve-3d;
  animation: spin 20s infinite linear;
  /*border: 1px solid blue;*/
}

.cube div {
  position: absolute;
  width:200px;
  height: 200px;
  background-color: rgba(54,39,39,0.53);
  /*border: 1px solid green;*/
  box-shadow: inset 4px 4px 30px rgba(0,0,0,0.25);
  text-align: center;
  font-family: sans-serif;
  line-height: 200px;
  transition: background-color 3s ease;
}

.cube div:hover {
  background-color: rgba(239,179,210,.45);
}

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

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}

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

@keyframes spin {
  from { transform: rotateY(0) }
  to { transform: rotateY(360deg) }
}

问题根源 #

代码里所有的位移值（比如translateZ(-100px)、translateX(100px)）都是硬编码的100px，这个值刚好是初始200px边长的一半。一旦修改立方体面的尺寸，固定的位移值就不再匹配边长的一半，导致各个面的位置错位，立方体自然变形。另外.cube的position: center是无效属性，width:500px也和实际面尺寸不匹配，会干扰居中布局。

修复方案 #

用CSS变量统一管理立方体边长，让位移值动态计算为边长的一半，同时修正居中布局：

body {
  margin: 0;
  width: 100%;
}

.wrap {
  perspective: 800px;
  perspective-origin: 50% 100px;
  width: 100%;
  height: 400px; /* 根据立方体尺寸调整高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.cube {
  --cube-size: 300px; /* 这里修改立方体尺寸，所有面会自动适配 */
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  animation: spin 20s infinite linear;
}

.cube div {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  background-color: rgba(54,39,39,0.53);
  box-shadow: inset 4px 4px 30px rgba(0,0,0,0.25);
  text-align: center;
  font-family: sans-serif;
  line-height: var(--cube-size);
  transition: background-color 3s ease;
}

.cube div:hover {
  background-color: rgba(239,179,210,.45);
}

.back {
  transform: translateZ(calc(var(--cube-size) / -2)) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(calc(var(--cube-size) / 2));
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(calc(var(--cube-size) / -2));
  transform-origin: center left;
}

.top {
  transform: rotateX(-90deg) translateY(calc(var(--cube-size) / -2));
  transform-origin: top center;
}

.bottom {
  transform: rotateX(90deg) translateY(calc(var(--cube-size) / 2));
  transform-origin: bottom center;
}

.front {
  transform: translateZ(calc(var(--cube-size) / 2));
}

@keyframes spin {
  from { transform: rotateY(0) }
  to { transform: rotateY(360deg) }
}

关键修改点 #

• 新增--cube-size变量，统一控制立方体的尺寸，修改这个值就能调整大小，无需手动修改每个面的尺寸和位移。
• 用calc(var(--cube-size) / 2)替代硬编码的100px，确保位移值始终是边长的一半，保证各个面的位置正确。
• 修改.wrap为flex布局，实现立方体的居中对齐，替代原来无效的居中方式。
• 给.cube设置和边长一致的宽高，让容器和立方体尺寸匹配。

现在无论你把--cube-size改成200px、300px还是其他值，立方体都会保持规整形态，不会变形。

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