Build a "3D" building with HTML, CSS and JS

Question

How can I play the image below using HTML, CSS and JS (maybe images)? The "floor" numbers are unpredictable and each "floor" should be "clickable", a <a href="#"></a>, or something like that.

It is possible to do?

Answer 1

One can do what you want using only HTML and CSS3 transformations. That tool serves as a starting point, for you to experiment with the options available, but for greater control it is better to do manually. The way to use is:

1. Place the property in your CSS transform, followed by one or more processing operations;
2. The operation skew (note: non-standard) serves to tilt the element, and operation translate the displacement; both operations occur horizontally;
   • Note: there are variants skewX and skewY, tranlateX and translateY, etc..
3. The operation rotate rotate the element; any subsequent operation already takes into account the rotated element, so that if you want to move an element vertically, for example, rotate it 90 degrees, move it, and rotate it 90 degrees again (if applicable).
4. The operation scale increases/decreases the element in scale.

These are some simple operations. For a more complete list, see that documentation on the MDN. Note that not all of them can be supported by all browsers, and some of them require a prefix (-webkit-, -moz-, -o-, -ms-) before transform, since this property has not yet been fully standardized.

Below is a pretty crude example of what can be done. It tilts the top; shifts the front; shifts, rotates, climbs, tilts, and shifts the sides again, so as to place them in the proper place. The elements are common HTML, so you can put whatever you want there. Both the front and the side is clickable, and also put an effect hover to change the color of the walk under the mouse.

#topo {
  background-color: blue;
  width: 102px;
  height: 30px;
  transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  -moz-transform: skewX(-45deg);
  -o-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  margin: 20px;
}

#andares {
  list-style-type: none;
  margin: 20px;
}

#andares .frente {
  background-color: red;
  width: 100px;
  height: 30px;
  transform: translate(-54px);
  -webkit-transform: translate(-54px);
  -moz-transform: translate(-54px);
  -o-transform: translate(-54px);
  -ms-transform: translate(-54px);
  margin-top: -18px;
}

#andares li:hover .frente {
  background-color: yellow;
}

#andares .lado {
  background-color: green;
  width: 20px;
  height: 20px;
  margin: 1px;
  transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -webkit-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -moz-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -o-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -ms-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
}

#andares li:hover .lado {
  background-color: cyan;
}

<div id="topo"></div>
<ul id="andares">
  <li><a href="http://google.com"><div class="frente">Google</div><div class="lado"></div></a></li>
  <li><a href="http://facebook.com"><div class="frente">Facebook</div><div class="lado"></div></a></li>
  <li><a href="http://twitter.com"><div class="frente">Twitter</div><div class="lado"></div></a></li>
</ul>