Html 3D立方体-需要更好的变换公式

我正在显示一个静态HTML/CSS多维数据集，并在网页上动态调整其大小

（请注意，我不希望它旋转或旋转。）

这是一个代码笔，显示了我到目前为止所拥有的内容：（最初基于）

这在CSS文件中显示：

:root {
  --w: 100px;
  --h: 200px;
  --d: 300px;
}

它们给出了立方体的宽度、高度和深度。我能够使用JavaScript动态调整这些CSS变量：

document.documentElement.style.setProperty（'--w'，width+'px'）

。这个调整工作的伟大

问题是，我希望立方体保持在左上角附近，并且希望周围的背景自我调整，以包含几乎没有边距的立方体

目前，我需要使用“魔术”数字使这个例子适合背景

  --backgroundHeight: calc(1.5 * var(--h));
  --backgroundWidth: var(--d);
  --topX: -80%;
  --topY: -70%;
  --perspective: calc(3 * var(--d));

在h/w/d值改变之前，这些公式是正确的

如何计算这些值

或者，有没有更好的方法来构造HTML和CSS来实现这一点