Experimental 3D Room Exhibition Layout

A highly experimental 3D room layout for a gallery that aims to show exhibition details in an interesting way.

By in Playground on
Demo Code

Today we’d like to share an experimental 3D layout with you. The idea is to show some information about a gallery’s exhibition in an interesting way. Each artist has a “room” in the gallery which shows the schedule for the exhibition. When clicking on one of the navigation buttons, we move away from the current room and proceed to the next (or previous) one with an animation.

For this experiment we are using the animation library anime.js by Julian Garnier and imagesLoaded by David DeSandro.

Attention: Highly experimental! Please view with a modern browser that supports CSS 3D Transforms and CSS Flexbox.

Here are some screenshots of the different views of the layout.

The initial view is the first room of the gallery:
3DRoomExhibition_01

When navigating, we move to the next/previous room:
3DRoomExhibition_02

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

When clicking on the menu icon in the top right corner, we rotate the whole room and get a view from the top. An overlay is shows that contains a menu:
3DRoomExhibition_03

The info button triggers a special “Inception” effect 🙂 The images start floating away from the wall as if gravity is defied:
3DRoomExhibition_04

We hope you enjoy this little experiment and find it inspiring!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Double Image Hover Effects with Clip-Path Animations

How to Animate SVG Shapes on Scroll

Shape Lens Blur Effect with SDFs and WebGL

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 15

Comments are closed.

  2. This is definitely interesting and would really create room for an immersive experience. Thumbs up as always Manoella

  6. How to make pictures on thr wall to open in lightbox? Everything is super but gallery without pictures in big format is no gallery.

    • I guess you u’ll need to go to Japan and visit the exhibition to see the big pictures 🙂 !

    • Honestly it could be a great hero header for a more traditional (and easy to use) web gallery.

  8. This is friggin’ phenomenal, thanks for sharing! Y’all are pushing what the web can be.

  11. Great work Mary Lou. I am really inspired with your idea and the way you presented your idea. A 3D illustration is one of the toughest tasks but you have done it really well. With the help of this 3D room exhibition layout, we can showcase the exhibition details in a remarkable manner. The best feature of this layout is the transition between two rooms. I will definitely use this 3D room exhibition layout. Can I add sources to the template section at webdesignblog.info?