交互式3D购物地图-Interactive 3D Mall Map

Today we’d like to share a little 3D experiment with you. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces. When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs.
今天我们想和大家分享一个3D小实验。这个想法是显示一个购物中心地图的所有楼层的角度。此外，我们在边栏中搜索，允许过滤购物空间。一旦选择了一个楼层，我们将显示一些引脚作为不同存储空间的指示器。当点击一个PIN，我们会显示更多的空间细节。我们主要使用CSS欺骗，应用转换，通过添加或移除类来旋转和移动级别。水平是由嵌入的SVGs代表。

查看演示 下载资源