基于高度、宽度和深度创建动态的3D CSS 盒子

Question

基于高度、宽度和深度创建动态的3D CSS 盒子

6

我已经创建了一个固定高度和宽度的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

- Atul Prajapati

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

我从零开始重新创造了您的想法。

我设置了一个示例立方体，其中所有尺寸都使用CSS属性进行设置，并尽可能继承。

有两个辅助元素具有边框以使它们可见。

六个面的背景颜色具有独特的颜色以使它们易于区分。

旋转中心始终在应该在的位置。

您可以使用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" />