How to expand a 3D rectangle to show more rectangles when you click on it?

Question

I am new to 3D forms in HTML and CSS. How can I create a 3D rectangle, and when I click on it, the rectangle should display 3 more 3D rectangles below it, and these rectangles should be interactive.

Any pointers are appreciated.

Answer 1

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

function toggleVisibility() {
	container.className = vis ? 
		"container" : "container vis";
	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">
		<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
	</div>
  </div>
	
  <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">
		<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
	</div>
  </div>
	
  <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">
	    <img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
	</div>
  </div>
</div>

Run codeHide result

Hope this helps!

PS: mostly inspired in this article , also here jsfiddle I did with the SCSS stylesheet to see the correlations between $ dim and $ depth and various transformations