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

Question

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

Navigation

#1 by (17 votes)

11

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

Is it possible to do this?

javascript html css

asked by anonymous 18.02.2015 / 16:38

1 answer

What is the difference between factory, service or controller in Angular? How to copy objects in java

score 17 · Accepted Answer

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

Put the transform property in your CSS, followed by one or more transformation operations;

The operation with% (note: non- standard ) serves to tilt the element, and the skew operation displaces it; both operations occur horizontally ;

Note: there are variants translate and skewX , skewY and tranlateX , etc.

The translateY operation rotates the element; any subsequent operation already takes into account the rotated element, so if you want to move an element vertically, for example, rotate it 90 degrees, move it, and rotate it 90 degrees again (if any).

The rotate operation increases / decreases the scale element.

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

Below is a very rough example of what can be done. He tilts the top; moves forward; moves, rotates, scales, tilts, and moves the sides again so as to place them in the proper place. The HTML elements are common, so you can put whatever you want there. Both the front and the side is clickable, and I also put a transform effect to change the color of the floor 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>