Create Realistic 3D Image Gallery Room

Mary Lou wants to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms. Images are hanged along a wall which will have an end. Once the end of the wall is reached, a rotation will happen and you’ll be turned to the next wall with more images. To give a real sensation of being in a room, she only have four walls and corners. Each image will have a little description tag with a small-sized font and when clicking on it, a larger version will appear from below.

The main wall will get a width so that a certain amount of images fits inside. The default number of images per wall are the total number divided by four since Mary Lou has four walls to spread them on. She can also set the number of items per wall by initializing the layout array. Now, when she reaches the end of a wall and rotate to see the next one, she’ll add another wall dynamically and set the right transforms so that it’s in the right angle towards the main wall. Let’s take a look at some screenshots. The gallery starts by looking at the first image which will be centered in the viewport. With a very large screen, Mary Lou will be able to see the neighboring images as well, depending on the wall size of course.