Javascript 如何缩放或平移三维元素以适应场景宽度

我有一个三维长方体，尺寸为

100vmin

by

10vmin

by

100vmin

。长方体面位于具有类

.board

的父元素中。场景的透视图为

100vmax

。我使用

flex

显示器将长方体居中。这是CSS代码

正文{
填充：0；
保证金：0；
} 
* {
-moz框大小：边框框；
框大小：边框框；
} 
.现场{
高度：100vh；
宽度：100vw；
背景：#888；
保证金：自动；
-webkit透视图：100vmax；
-moz透视图：100vmax；
透视图：100vmax；
透视原点：中心；
显示器：flex；
证明内容：中心；
对齐项目：居中；
} 
.董事会{
位置：相对位置；
高度：100V分钟；
宽度：100vmin；
变换样式：保留-3d；
显示器：flex；
对齐项目：居中；
证明内容：中心；
变换：旋转（30度）；
} 
f{
位置：绝对位置；
边框：1px实心#fff；
字体系列：Arial；
字体大小：粗体；
字号：2em；
颜色：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
} 
.f.ff、.f.fB{
高度：100V分钟；
宽度：100vmin；
边框：10px实心#FFBC00；
背景：透明；
} 
.f.fr、.f.fl{
高度：100V分钟；
宽度：计算（0.1*100vmin）；
背景：透明；
} 
.f.ft..f.fb{
高度：计算（0.1*100vmin）；
宽度：100vmin；
边界：无；
背景#9B6F00；
} 
f.ff{
变换：旋转（0deg）平移（calc（.5*calc（0.1*100vmin））；
} 
.f.fB{
变换：旋转（180度）平移（计算温度（.5*计算温度（0.1*100vmin））；
} 
f.f.fr{
变换：旋转（90度）平移（计算（.5*100vmin））；
} 
f.fl{
变换：旋转（-90度）平移Z（计算（.5*100vmin））；
} 
.f.fb{
变换：rotateX（-90度）translateZ（calc（.5*100vmin））；
} 
f.ft{
变换：rotateX（90度）translateZ（计算温度（.5*100vmin））；
}

F
B
R
L
B
T