javascript - 基于高度、宽度和深度创建动态 3d css 框

Question

我已经创建了固定高度和宽度的 3D 盒子，现在我必须制作 它动态地基于用户给定的高度、宽度和深度，这样他就可以得到关于盒子的外观的想法。高度和宽度工作正常但是当 我试着改变盒子设计的深度。我也想让它旋转 如果我更改宽度，中心位置的框将不会完成。

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

我从 0 开始重新创建了您的想法。

我已经设置了一个演示多维数据集，其中所有维度都使用 css 属性设置，并在可能的情况下进行继承。

有 2 个辅助元素具有边框以使其可见。

这六张脸的背景颜色各不相同，以使其易于区分。

而且旋转中心也将始终位于应有的位置。

您可以使用 jQuery 来更改变量，而不是使用 CSS(所有现代浏览器都支持。唯一的问题是 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" />