Creating dynamic 3d css box based on height, width and depth

Question

I have created the 3D Box with Fixed height and width, Now i have to make it dynamic based height, width and depth given by user so that he can get idea of how the box will look like. Height and width is working fine but when i try to change the depth the box design breaks. also i want it to rotate the box from the center position which is not done if i change the width.

jQuery('._3dface--top').css("width", (jQuery('#boxWidth').val() * 10));
jQuery('._3dface--top').css("height", jQuery('#boxzPosition').val());

jQuery('._3dface--bottom').css("width", (jQuery('#boxWidth').val() * 10));
jQuery('._3dface--bottom').css("height", jQuery('#boxzPosition').val());
jQuery('._3dface--bottom').css("top", parseInt((jQuery('#boxHeight').val() * 10) - 250));

jQuery('._3dface--left').css("width", jQuery('#boxzPosition').val());
jQuery('._3dface--left').css("height", (jQuery('#boxHeight').val() * 10));

jQuery('._3dface--right').css("width", jQuery('#boxzPosition').val());
jQuery('._3dface--right').css("height", (jQuery('#boxHeight').val() * 10));
jQuery('._3dface--right').css("left", parseInt((jQuery('#boxWidth').val() * 10) - 130));

jQuery('._3dface--back').css("width", (jQuery('#boxWidth').val() * 10));
jQuery('._3dface--back').css("height", (jQuery('#boxHeight').val() * 10));

JSfiddle

Answer 1

I have recreated your idea starting from 0.

I have set a demo cube where all the dimensions are set with css properties, and inheritance where posible.

there are 2 auxiliary elements that have borders to make them visible.

The six faces are background colored with distinctive colors to make them distinguishable.

And the center of rotation will be always where it should, too.

You can adapt it to run in older browsers using jQuery to change the variables, instead of using CSS (supported in all modern browsers. the only issue would be with IE)

const inputs = document.querySelectorAll('input');

// listen for changes
inputs.forEach(input => input.addEventListener('change', update));


function update(e) {
  document.documentElement.style.setProperty(`--${this.id}`, this.value + 'px');
}

:root {
  --height: 200px;
  --width: 300px;
  --depth: 120px;
}

.base,
.base * {
  transform-style: preserve-3d;
}

.base {
  height: var(--height);
  width: var(--width);
  margin: 100px;
  position: relative;
  border: solid 1px blue;
  transform: rotate3d(1, 1, 1, 45deg);
}

.top {
  height: var(--depth);
  width: 100%;
  bottom: 100%;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.4);
  transform: translateY(50%) rotateX(90deg);
}

.down {
  height: var(--depth);
  width: 100%;
  top: 100%;
  position: absolute;
  background-color: rgba(0, 255, 0, 0.4);
  transform: translateY(-50%) rotateX(90deg);
}

.right {
  width: var(--depth);
  height: 100%;
  left: 100%;
  position: absolute;
  background-color: rgba(128, 128, 0, 0.4);
  transform: translateX(-50%) rotateY(90deg);
}

.left {
  width: var(--depth);
  height: 100%;
  right: 100%;
  position: absolute;
  background-color: rgba(128, 0, 128, 0.4);
  transform: translateX(50%) rotateY(90deg);
}

.aux {
  width: 100%;
  height: var(--depth);
  border: solid 2px red;
  position: absolute;
  transform: translateY(-50%) rotateX(-90deg);
}

.front {
  height: var(--height);
  width: 100%;
  top: 100%;
  position: absolute;
  background-color: rgba(0, 0, 255, 0.4);
  transform: rotateX(90deg);
  transform-origin: center top;
}

.back {
  height: var(--height);
  width: 100%;
  bottom: 100%;
  position: absolute;
  background-color: rgba(0, 128, 128, 0.4);
  transform: rotateX(-90deg);
  transform-origin: center bottom;
}

input {
  width: 50px;
}

<div class="base">
  <div class="top"></div>
  <div class="down"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="aux">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<label for="height">height</label>
<input type="number" id="height" value="200" />
<label for="width">width</label>
<input type="number" id="width" value="300" />
<label for="depth">depth</label>
<input type="number" id="depth" value="120" />