3D cube - need better transform formulas

Question

I am showing a static HTML/CSS cube and dynamically resizing it on the web page.

(Please note that I do NOT want it to rotate or spin.)

Here is a codepen showing what I have so far: https://codepen.io/glittle9/pen/KKgqQdR (based originally on https://stackoverflow.com/a/36401954/32429)

This in the CSS file:

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

These give the width, height and depth of the cube. I am able to dynamically adjust these CSS variables using JavaScript: document.documentElement.style.setProperty('--w', width + 'px'). This resizing works great!

The problem is that I want the cube to stay near the top left corner, and I want the surrounding background to adjust itself to contain the cube with little or no margin.

Currently, I'm needing to use 'magic' numbers to make this example fit into the background.

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

These formulas are correct until the h/w/d values change!

How should these values be calculated?

Or, is there a better way to structure the HTML and CSS to accomplish this?