如何展開3D矩形以在點擊時顯示更多矩形？

Question

我是新來的HTML和CSS中的三維形狀。我怎樣才能創建一個3D矩形，當點擊它時，矩形應該在其下面顯示3個更多的3D矩形，這些矩形應該是可點擊的。

任何指針表示讚賞。

Answer 1

var vis = false; 
 
var container = document.getElementById("c"); 
 
container.onclick = toggleVisibility; 
 

 
function toggleVisibility() { 
 
\t container.className = vis ? 
 
\t \t "container" : "container vis"; 
 
\t vis = !vis; 
 
}

img { 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    perspective: 2000px; 
 
    transform-style: preserve-3d; 
 
    transform: rotateX(40deg) rotateZ(25deg); 
 
} 
 

 
.box { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 160px; 
 
    height: 160px; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.side { 
 
    position: absolute; 
 
    width: 160px; 
 
    height: 160px; 
 
    border: 1px solid rgba(0,0,0,.2); 
 
} 
 

 
.side-vert { 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 160px; 
 
    border: 1px solid rgba(0,0,0,.2); 
 
} 
 

 
.side-hor { 
 
    position: absolute; 
 
    width: 160px; 
 
    height: 30px; 
 
    border: 1px solid rgba(0,0,0,.2); 
 
} 
 

 
.back { 
 
    transform: translateZ(-15px); 
 
} 
 

 
.left { 
 
    transform: translateX(-15px) rotateY(90deg); 
 
} 
 

 
.right { 
 
    transform: translateX(145px) rotateY(90deg); 
 
} 
 

 
.top { 
 
    transform: translateY(-15px) rotateX(90deg); 
 
} 
 

 
.bottom { 
 
    transform: translateY(145px) rotateX(90deg); 
 
} 
 

 
.front { 
 
    transform: translateZ(15px); 
 
} 
 

 
.r { 
 
    transform: translateZ(45px); 
 
} 
 

 
.g { 
 
    visibility: hidden; 
 
    transform: translateZ(0); 
 
} 
 

 
.b { 
 
    visibility: hidden; 
 
    transform: translateZ(-45px); 
 
} 
 

 
.r > * { 
 
    background-color: rgba(255, 0, 0, 0.2); 
 
} 
 

 
.g > * { 
 
    background-color: rgba(0, 255, 0, 0.2); 
 
} 
 

 
.b > * { 
 
    background-color: rgba(0, 0, 255, 0.2); 
 
} 
 

 
.vis > * { 
 
    visibility: visible; 
 
}

<div id="c" class="container"> 
 
    <div class="box r"> 
 
    <div class="side back"></div> 
 
    <div class="side-vert left"></div> 
 
    <div class="side-vert right"></div> 
 
    <div class="side-hor top"></div> 
 
    <div class="side-hor bottom"></div> 
 
    <div class="side front"> 
 
\t \t <img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png"> 
 
\t </div> 
 
    </div> 
 
\t 
 
    <div class="box g"> 
 
    <div class="side back"></div> 
 
    <div class="side-vert left"></div> 
 
    <div class="side-vert right"></div> 
 
    <div class="side-hor top"></div> 
 
    <div class="side-hor bottom"></div> 
 
    <div class="side front"> 
 
\t \t <img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png"> 
 
\t </div> 
 
    </div> 
 
\t 
 
    <div class="box b"> 
 
    <div class="side back"></div> 
 
    <div class="side-vert left"></div> 
 
    <div class="side-vert right"></div> 
 
    <div class="side-hor top"></div> 
 
    <div class="side-hor bottom"></div> 
 
    <div class="side front"> 
 
\t  <img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png"> 
 
\t </div> 
 
    </div> 
 
</div>

我希望這有助於！

PS：由this article主要是啓發，也here's a jsfiddle我SCSS樣式表，看$之間的相關性變得暗淡，而且$深度和不同的變換