如何无需手动偏移组装CSS 3D平行六面体

我尝试用CSS绘制3D平行六面体，但初始效果不符合预期。现有HTML结构如下：

<div class="parallelepiped" :style="parallelepipedStyle">
   <!-- Top and Bottom faces -->
   <div class="face top" :style="topFaceStyle"></div>
   <div class="face bottom" :style="bottomFaceStyle"></div>
   <div class="face left" :style="leftFaceStyle"></div>
   <div class="face right" :style="rightFaceStyle"></div>
   <div class="face front" :style="frontFaceStyle"></div>
   <div class="face back" :style="backFaceStyle"></div>
</div>

定义的常量：

const width = 300;
const height = 20;
const depth = 200;

初始样式计算逻辑：

const parallelepipedStyle = () => {
  return {
    transform: `rotateX(${rotateX.value}deg) rotateY(${rotateY.value}deg) rotateZ(${rotateZ.value}deg)`,
  };
};

const topFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${depth.value}px`,
  transform: `translateY(${-height.value / 2}px) rotateX(90deg)`,
}));

const bottomFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${depth.value}px`,
  transform: `translateY(${height.value / 2}px) rotateX(-90deg)`,
}));

const leftFaceStyle = computed(() => ({
  width: `${depth.value}px`,
  height: `${height.value}px`,
  transform: `translateX(${-width.value / 2}px) rotateY(-90deg)`,
}));

const rightFaceStyle = computed(() => ({
  width: `${depth.value}px`,
  height: `${height.value}px`,
  transform: `translateX(${width.value / 2}px) rotateY(90deg)`,
}));

const frontFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`,
  transform: `translateZ(${depth.value / 2}px)`,
}));

const backFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`,
  transform: `translateZ(${-depth.value / 2}px) rotateY(180deg)`,
}));

添加固定偏移后显示正常，但修改尺寸时必须手动重新计算偏移值：

const topFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${depth.value}px`,
  transform: `translateY(${-height.value / 2 - 90}px) rotateX(90deg)`,
}));

const bottomFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${depth.value}px`,
  transform: `translateY(${height.value / 2 - 90}px) rotateX(-90deg)`,
}));

const leftFaceStyle = computed(() => ({
  width: `${depth.value}px`,
  height: `${height.value}px`,
  transform: `translateX(${-width.value / 2 + 50}px) rotateY(-90deg)`,
}));

const rightFaceStyle = computed(() => ({
  width: `${depth.value}px`,
  height: `${height.value}px`,
  transform: `translateX(${width.value / 2 + 50}px) rotateY(90deg)`,
}));

请问如何正确组装该3D对象，避免每次调整尺寸都手动重新计算偏移值？

解决方案 #

问题核心是3D变换的顺序错误，以及父容器未正确开启3D空间，导致面的位置无法自动适配尺寸变化。以下是修正步骤：

1. 配置父容器的3D基础样式 #

首先给.parallelepiped添加CSS，确保3D空间生效：

.parallelepiped {
  position: relative;
  /* 开启3D空间，让子元素的3D变换生效 */
  transform-style: preserve-3d;
  /* 可选：添加透视效果增强3D视觉感受 */
  /* perspective: 800px; */
}

.face {
  position: absolute;
  /* 给面添加半透明背景方便调试 */
  background: rgba(255, 100, 100, 0.7);
  border: 1px solid #333;
}

2. 修正面的变换逻辑 #

CSS变换是从右到左执行的，错误的变换顺序会导致面的位置偏移。正确的逻辑是：先平移到目标位置的对应轴方向，再旋转，确保旋转后的面刚好贴合到盒子的侧面，且所有计算都基于尺寸变量，无硬编码值。

修正后的样式计算代码如下：

const parallelepipedStyle = () => {
  return {
    transform: `rotateX(${rotateX.value}deg) rotateY(${rotateY.value}deg) rotateZ(${rotateZ.value}deg)`,
    transformStyle: 'preserve-3d',
    position: 'relative'
  };
};

const topFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${depth.value}px`,
  // 先沿Y轴负方向移动width/2，再绕X轴旋转90度，使面贴合盒子顶部
  transform: `rotateX(90deg) translateY(${-width.value / 2}px)`,
}));

const bottomFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${depth.value}px`,
  // 先沿Y轴正方向移动width/2，再绕X轴旋转-90度，使面贴合盒子底部
  transform: `rotateX(-90deg) translateY(${width.value / 2}px)`,
}));

const leftFaceStyle = computed(() => ({
  width: `${depth.value}px`,
  height: `${height.value}px`,
  // 先沿Z轴正方向移动width/2，再绕Y轴旋转-90度，使面贴合盒子左侧
  transform: `rotateY(-90deg) translateZ(${width.value / 2}px)`,
}));

const rightFaceStyle = computed(() => ({
  width: `${depth.value}px`,
  height: `${height.value}px`,
  // 先沿Z轴负方向移动width/2，再绕Y轴旋转90度，使面贴合盒子右侧
  transform: `rotateY(90deg) translateZ(${-width.value / 2}px)`,
}));

const frontFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`,
  // 沿Z轴正方向移动depth/2，贴合盒子前面
  transform: `translateZ(${depth.value / 2}px)`,
}));

const backFaceStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`,
  // 沿Z轴负方向移动depth/2，旋转180度让正面朝外，贴合盒子后面
  transform: `translateZ(${-depth.value / 2}px) rotateY(180deg)`,
}));

3. 验证效果 #

修改后，调整width、height、depth的数值时，所有面都会自动适配位置，无需手动调整偏移量。因为所有变换参数都基于这三个尺寸变量动态计算，完全消除了硬编码的固定值。

关键注意事项 #

• 必须开启transform-style: preserve-3d，否则子元素的3D变换会被扁平化到2D平面
• 牢记CSS变换的执行顺序是从右到左，变换顺序错误会直接导致面的位置偏移
• 所有面的位置计算都基于父容器的中心原点，使用尺寸的一半进行平移，确保面刚好贴合到盒子的对应侧面

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