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.
The responsiveness of this concept is powered by the viewport unit vmin which allows us to use the smallest viewport side for sizing our elements.
This concept can be applied to any kind of floor map actually; any building that has several floors and spaces could be an interesting use case for this.
For the filtering and ordering of the spaces list in the sidebar we are using List.js, a great library for adding search, sort, filters and flexibility to tables, lists and various HTML elements.
The following is the initial view of the mall:
When clicking on a level or when clicking on a space in the sidebar, the respective level opens and the pins show:
Clicking on a pin will open the details for that space:
We hope you enjoy this little experiment and find it inspiring!
Excellent work :)
magnificent :-)
hello I really love this project, I want to apply on my website. But my knowledge of css and jquery is really small. Can you help me to modify it? I need five floors than 4 floors. Please help me!
Thanks a lot.
Hi, excellent work. Is it possible to apply it using a map of my town?
Thank you for your answer
Oh, this is great for a website map, and that’s what I am doing right now. Can anyone be more talented than the Codrops guys?
Help me, svg editor for mac?
hello, I’m not a programmer, how can I modify to my needs Interactive Mall Map 3D?
Very good! Thank you! But not with IE.
First at all, I Apologize for my bad english, and excuse me , ¿what software you use to draw SVG the icons and the levels and take the coordinates and put them in html? or ¿how you do that?, any information is usefull, thank you in advance
Mary Lou = Great :-)
very nice work >>> it will be excellent if there is a DB instead of list.js
brillant, would be terrific to be able to modify the map with an easy way ? Any tips or hints ? thanks
we can use this tool, http://www.cssplant.com/clip-path-generator
work, but still isnt easy
Awesome. One of the best interactions, I have seen.
cool
it iiiiis the class room …
thanks
great
This demo is not working in IE. Please help me to solve these issues.
u guys are just doing awesome..
#codropsrock :)
Hi!
Thanks for sharing this project!
How would it be possible to make it work on IE11+?
Thanks!
Hey
ma’am can you help me customize it how did you make the inner blocks and is there any framework you used
nice Work!!! i really want to do something at least cloaser on that! where can i find more steps of this ‘tutorial’ plz? :P