Javascript 构造一个；3D"；使用HTML、CSS和JS构建

这个问题涉及面很广，我知道，但无论如何

如何使用HTML、CSS和JS（可能是图像）实现与下图相同的结果？“层”的数量是不可预测的，建筑的每个“层”都必须是可点击的、一个

或类似的东西

有可能吗？

是的，有可能

您可以使用画布或SVG是的，这是可能的

---

您可以使用canvas或SVG

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

#堆栈{
填充：10px；
}
.屋顶{
宽度：100px；
高度：20px；
背景:#aff ;；
变换：translateX（10px）skewX（135度）；
衬垫顶部：-20px；
}
.级别{
文本对齐：居中；
宽度：100px；
高度：20px；
背景：#99f；
保证金：1px；
}
.级别：之后{
显示：块；
宽度：20px；
高度：20px；
背景：#00f；
内容：“；
左边距：100px；
变换：translateY（-30px）歪斜（135度）；
}
.级别：悬停{
背景:#f99；
}
.级别：悬停：之后{
背景：#f00；
}

1.
2.
3.
4.

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

#堆栈{
填充：10px；
}
.屋顶{
宽度：100px；
高度：20px；
背景:#aff ;；
变换：translateX（10px）skewX（135度）；
衬垫顶部：-20px；
}
.级别{
文本对齐：居中；
宽度：100px；
高度：20px；
背景：#99f；
保证金：1px；
}
.级别：之后{
显示：块；
宽度：20px；
高度：20px；
背景：#00f；
内容：“；
左边距：100px；
变换：translateY（-30px）歪斜（135度）；
}
.级别：悬停{
背景:#f99；
}
.级别：悬停：之后{
背景：#f00；
}

1.
2.
3.
4.

您必须使用css转换和伪元素。 这只是一个简单的例子：

a{
显示：块；
宽度：100px；
背景：蓝色；
高度：30px；
线高：30px；
颜色：#fff；
文本对齐：居中；
边缘底部：2px；
位置：相对位置；
}
a:以后{
位置：绝对位置；
内容：“；
背景：黑暗；
高度：20px；
宽度：42px；
右：-36px；
顶部：-2px；
变换：倾斜（-45度）旋转（45度）；
}
div{
填充：100px；
}

---

您必须使用css转换和伪元素。 这只是一个简单的例子：

a{
显示：块；
宽度：100px；
背景：蓝色；
高度：30px；
线高：30px；
颜色：#fff；
文本对齐：居中；
边缘底部：2px；
位置：相对位置；
}
a:以后{
位置：绝对位置；
内容：“；
背景：黑暗；
高度：20px；
宽度：42px；
右：-36px；
顶部：-2px；
变换：倾斜（-45度）旋转（45度）；
}
div{
填充：100px；
}

“这个问题太广泛了”-没错。也许你可以在HTML列表中使用CSS3转换，我建议你创建一个，并根据你的进度更新你的问题get@Paulie_D我不确定它是否太宽而无法回答。就像有多少人问“如何从JavaScript调用PHP函数”一样，有时也可以在过程的早期询问一些事情，以确定它在物理上是否可行（比如说，在将大量代码库用于假设您到达那里时会找到它之前），如关闭选项中所述“可能的答案太多，或者好的答案对于这种格式来说太长了。”根据定义，这个问题太宽泛了。@Paulie\u根据这个定义，“如何设置从左向右移动的块的动画？”“太宽泛了，仅仅因为有很多方法可以用JavaScript实现。仔细看看OP的最后一句话；“有可能吗？”如果没有，这是一个有效的答案，我已经用这种方式回答了很多与网络相关的问题；“不，如果浏览器允许你这样做，这将是一个安全风险。”下面的几个人已经给出了完美的解决方案来解决这个问题，时间不长。请不要做一个迟钝的投票人。“这个问题太广泛了”-没错。也许你可以在HTML列表中使用CSS3转换，我建议你创建一个，并根据你的进度更新你的问题get@Paulie_D我不确定它是否太宽而无法回答。就像有多少人问“如何从JavaScript调用PHP函数”一样，有时也可以在过程的早期询问一些事情，以确定它在物理上是否可行（比如说，在将大量代码库用于假设您到达那里时会找到它之前），如关闭选项中所述“可能的答案太多，或者好的答案对于这种格式来说太长了。”根据定义，这个问题太宽泛了。@Paulie\u根据这个定义，“如何设置从左向右移动的块的动画？”“太宽泛了，仅仅因为有很多方法可以用JavaScript实现。仔细看看OP的最后一句话；“有可能吗？”如果没有，这是一个有效的答案，我已经用这种方式回答了很多与网络相关的问题；“不，如果浏览器允许你这样做，这将是一个安全风险。”下面的几个人已经给出了完美的解决方案来解决这个问题，时间不长。请不要再做一个迟钝的亲密选民。