Construct a "3D" bulding using HTML, CSS and JS

Question

This question is to broad, I know, but anyway...

How can I achieve the same result as the image below using HTML, CSS and JS (maybe images)? The number of "levels" are unpredictable and every "level" of the building must be clickable, an <a href="#"></a>, or something like this.

buildings

Is that possible?

maybe you can use CSS3 transforms in a HTML list, I suggest you to create a jsfiddle, and update your question with the progress you get — Pedro Sanção
– Pedro Sanção, Commented Feb 18, 2015 at 16:07
@Paulie_D I'm not sure if it's too broad to answer. Just like how many people ask "how to call a PHP function from JavaScript", it's sometimes okay to ask about something early in the process to find out whether it's physically possible or not (before, say, devoting a large codebase to the assumption that you'll figure it out when you get there) — Katana314
– Katana314, Commented Feb 18, 2015 at 16:12
As stated in the Close options "There are either too many possible answers, or good answers would be too long for this format." By definition this question is too broad. — Paulie_D
– Paulie_D, Commented Feb 18, 2015 at 16:17
@Paulie_D By that definition, "How can I animate a block moving from left to right" would be too broad, merely because there are numerous ways you can do it in JavaScript. Take a closer look at the OP's final sentence; "Is that possible?" If no, that's a valid answer, and I have answered plenty of web-related questions that way; "No, it would be a security risk if browsers let you do this." Several people below have given perfectly appropriate fiddles to solve this problem that are not too long. Please STOP being an obtuse close-voter. — Katana314
– Katana314, Commented Feb 19, 2015 at 2:50

lupz · Accepted Answer · 2015-02-18 16:16:18Z

I build something with css transformations. Not perfect but i guess you'll see the point. It's using transformations for the roof and the side elements and adds the side elements through a pseudo class.

#stack {
  padding: 10px;
}

.roof {
    width: 100px;
    height: 20px;
    background: #aff;
    transform: translateX(10px) skewX(135deg);
    padding-top: -20px;
}
.level {
    text-align: center;
    width: 100px;
    height: 20px;
    background: #99f;
    margin: 1px;
}

.level:after {
    display: block;
    width: 20px;
    height: 20px;
    background: #00f;
    content: "";
    margin-left: 100px;
    transform: translateY(-30px) skewY(135deg);
}

.level:hover {
    background: #f99;
}

.level:hover:after {
    background: #f00;
}

<div id="stack">
    <div class="roof"></div>
    <div class="level">1</div>
    <div class="level">2</div>
    <div class="level">3</div>
    <div class="level">4</div>
</div>

Feel free to use links inside of the levels.

Edit: added :hover highlighting

rb_x · Accepted Answer · 2015-02-18 16:09:49Z

2

You have to play a bit with css transform and pseudo elements. Just a quick and dirty example:

a {
    display:block;
    width:100px;
    background:blue;
    height: 30px;
    line-height:30px;
    color: #fff;
    text-align:center;
    margin-bottom:2px;
    position:relative;
}

a:after {
    position:absolute;
    content:"";
    background:darkRed;
    height: 20px;
    width: 42px;
    right: -36px;
    top:-2px;
    transform: skew(-45deg) rotate(45deg);
}

div {
    padding:100px;
}

<div>
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
    <a href="#">four</a>
</div>

answered Feb 18, 2015 at 16:09

rb_x

662 bronze badges

Comments

shaneeth · Accepted Answer · 2015-02-18 15:48:42Z

0

Yes, it is possible

you can use canvas or SVG

answered Feb 18, 2015 at 15:48

shaneeth

364 bronze badges

Collectives™ on Stack Overflow

Construct a "3D" bulding using HTML, CSS and JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related