高さと幅と奥行きに基づいて動的な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つの補助要素があり、それらを見えるようにする境界線があります。

6つの顔は、識別可能にするために、独特の色で背景色が付いています。

そして回転の中心はいつも必要な場所になります。

あなたは（すべての近代的なブラウザでサポートされています。唯一の問題はIEとなります）の代わりにCSSを使用しての、変数を変更するにはjQueryのを使用して、古いブラウザで実行するように適応させることができ

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