How do I create a CSS-only 3D image gallery?

Creating a CSS-only 3D Image Gallery

In this blog post, we will explore how to create a 3D image gallery using only CSS. This technique can be a fun and visually appealing way to display a collection of images on your website. We’ll begin by setting up the HTML structure, and then move on to styling it with CSS to achieve the 3D effect.

Step 1: Set up the HTML structure

First, we’ll create a simple HTML structure that consists of a container div and several nested divs representing the images in the gallery. Here’s an example:

<!-- html -->
<!DOCTYPE html>
  <link rel="stylesheet" href="styles.css">
  <div class="gallery">
    <div class="image-container">
      <img src="image1.jpg" alt="Image 1">
    <div class="image-container">
      <img src="image2.jpg" alt="Image 2">
    <div class="image-container">
      <img src="image3.jpg" alt="Image 3">

Step 2: Basic styling for the image gallery

Next, we’ll add some basic styling to the gallery and image-container elements to position them correctly.

/* CSS /
.gallery {
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px; / This sets the distance between the viewer and the 3D space */

.image-container {
width: 200px;
height: 200px;
margin: 10px;
transform-style: preserve-3d; /* This is essential for creating 3D effects */

.image-container img {
width: 100%;
height: auto;
object-fit: cover;

Step 3: Create the 3D effect

Now, we’ll add the 3D effect to our image gallery. To achieve this, we’ll apply a CSS transform to each image-container element. This transform will rotate the element around the Y-axis to create the illusion of depth.

/* CSS */
.image-container:nth-child(1) {
transform: rotateY(-45deg);

.image-container:nth-child(2) {
transform: rotateY(0deg);

.image-container:nth-child(3) {
transform: rotateY(45deg);

Step 4: Add interactivity

Lastly, we’ll add some interactivity to our 3D image gallery. We’ll use the :hover pseudo-class to rotate the image containers further when a user hovers over them.

/* CSS */
.image-container:hover {
transform: rotateY(180deg);
transition: transform 0.5s ease;

Now we have a simple, CSS-only 3D image gallery! You can further customize the gallery’s appearance and behavior by modifying the CSS properties as needed.

Got question?

Submit it here

© All rights reserved.