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

问题描述

我正在显示一个静态 HTML/CSS 立方体并在网页上动态调整其大小。

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

这是一个代码笔，显示了我目前所拥有的：https://codepen.io/glittle9/pen/KKgqQdR（最初基于 https://stackoverflow.com/a/36401954/32429）

在 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 来实现此目的？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）