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

vals · Accepted Answer · 2017-08-20 07:51:39Z

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" />

Happy that it helped! I have added controls to adjust the sizes, I hadn't enough time yesterday
what are the changes I have to make If I want to use Length instead of height?
@SanjayGohil You mean for the css variable name ? Just replace it everywhere

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related