как я могу масштабировать или трансформировать 3D-элемент по ширине сцены

Question

Имею трехмерный кубоид размеров 100vmin на 10vmin на 100vmin. Кубовидные грани помещаются в родительский элемент, имеющий класс .board. Сцена имеет перспективу 100vmax. Я центрировал кубоид по центру, используя дисплей flex. вот код CSS.

body {
    padding: 0;
    margin: 0;
} 
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} 
.scene {
    height: 100vh;
    width: 100vw;
    background: #888;
    margin: auto;
    -webkit-perspective: 100vmax;
    -moz-perspective: 100vmax;
    perspective: 100vmax;
    perspective-origin: center;

    display: flex;
    justify-content: center;
    align-items: center;
} 
.board {
    position: relative;
    height: 100vmin;
    width: 100vmin;
    transform-style: preserve-3d;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    transform: rotateX(30deg);
} 
.f {
    position: absolute;
    border: 1px solid #fff;
    font-family: Arial;
    font-weight: bold;
    font-size: 2em;
    color: #fff;
    
    display: flex;
    align-items: center;
    justify-content: center;
} 
.f.ff, .f.fB {
    height: 100vmin;
    width: 100vmin;
    border: 10px solid #FFBC00;
    background: transparent;
} 
.f.fr, .f.fl {
    height: 100vmin;
    width: calc(0.1 * 100vmin);
    background: transparent;
} 
.f.ft, .f.fb {
    height: calc(0.1 * 100vmin);
    width: 100vmin;
    border: none;
    background: #9B6F00;
} 

.f.ff {
    transform: rotateY(0deg) translateZ(calc(.5 * calc(0.1 * 100vmin) ));
} 
.f.fB {
    transform: rotateY(180deg) translateZ(calc(.5 * calc(0.1 * 100vmin) ));
} 
.f.fr {
    transform: rotateY(90deg) translateZ(calc(.5 * 100vmin) );
} 
.f.fl {
    transform: rotateY(-90deg) translateZ(calc(.5 * 100vmin));
} 
.f.fb {
    transform: rotateX(-90deg) translateZ(calc(.5 * 100vmin));
} 
.f.ft {
    transform: rotateX(90deg) translateZ(calc(.5 * 100vmin));
} 

<div class="scene">
    <div class="board">
        <div class='f ff'>F</div>
        <div class='f fB'>B</div>
        <div class='f fr'>R</div>
        <div class='f fl'>L</div>
        <div class='f fb'>b</div>
        <div class='f ft'>T</div>           
    </div>
</div>

Когда я поворачиваю кубоид по оси x, скажем, на 45deg, его абсолютная высота, очевидно, изменится из-за перспективы, следовательно, будут некоторые пространство на его вершине. Я хотел убрать это пространство и убедиться, что оно идеально подходит для ширины устройства.

Я пробовал использовать Javascript, чтобы получить вершину, используя эту формулу, основанную на концепции круга и касательной, затем я масштабируйте элемент, используя полученный мной масштабный коэффициент.

let height = window.innerHeight;
let front_top = (height/2) * (1-Math.sin(45 * Math.PI/180));
let bottom_top = (.1*height/2) * (1-Math.sin(45 * Math.PI/180);
let scale_factor = height/(height - front_top - bottom_top);
let average_top = (front_top + bottom_top) / 2;

формула работает нормально, но есть разница в пикселях из-за перспективы. Пожалуйста, мне нужна помощь, чтобы подогнать элемент. Заранее спасибо.