javascript - 使用 HTML、CSS 和 JS 构造一个 "3D"的建筑

Question

这个问题太宽泛了，我知道，但无论如何......

如何使用 HTML、CSS 和 JS(可能是图像)获得与下图相同的结果？ “级别”的数量是不可预测的，建筑物的每个“级别”都必须是可点击的，<a href="#"></a> ，或类似的东西。

这可能吗？

Answer 1

我用 CSS 转换构建了一些东西。不完美，但我想你会明白这一点。它对屋顶和侧面元素使用转换，并通过伪类添加侧面元素。

#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>

请随意使用关卡内的链接。

编辑:添加了:hover 高亮显示