javascript - Creating dynamic 3d css box based on height, width and depth - Stack Overflow

admin管理员组

文章数量:1410737

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

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

• javascript
• jquery
• html
• css

Share Follow asked Aug 19, 2017 at 5:50 Atul PrajapatiAtul Prajapati 17711 silver badge1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptCreating dynamic 3d css box based on heightwidth and depthStack Overflow