如何修改CSS变量缩小3D立方体尺寸且不产生立方体间距

问题原因 #

仅调整了控制立方体尺寸的--size变量，控制立方体排列位置的--radius变量没有按照相同比例缩小，导致立方体排布的圆心半径远大于缩小后的立方体尺寸，因此出现多余间距。

解决方法 #

按照--size的缩放比例同步调整--radius的数值即可：
原--size为4，修改后为1，缩放比例为 1/4 = 0.25，因此--radius需要同步乘以0.25计算得出新值：
5.5 * 0.25 = 1.375

修改后的完整CSS变量定义如下：

:root {
  --hue: 185;
  --radius: 1.375;
  --size: 1;
}

调整后立方体的排布半径会和缩小后的尺寸匹配，即可保持无间距排列的效果。

内容的提问来源于stack exchange，提问作者Jack The Baker