3D Rotating Image Gallery in HTML, CSS and JavaScript

JavaTpoint September 04, 2024

 Get Free JV Source Code: 3D Rotating Image Gallery

Creating engaging and artistic features when it comes to website design is very important in order to attract the attention of the visitors. Some of these are the 3D Rotating Image Gallery which you could find to be really interesting in making your web pages stand out.



In this article, I will be glad to give you free source codes which will enable you implement this interesting feature on your website. This article will be useful for both beginners and professionals who want to develop their web development skills.

Features

3D Rotating Image Gallery is released with a set of features that can be beneficial for every website.

  • Interactive 3D Rotation: The gallery is the user-friendly interface that enables users to rotate through a series of images with an ease.
  • Responsive Design: The gallery is fully optimized and can adapt to the screen size therefore the same gallery can be used on a desktop, a laptop, a tablet or a mobile Phone.
  • Customizable: Navigation of the gallery is also very flexible and has options where you are able to set rotation speed, number of pictures as well as the style of the gallery.
  • Automatic Rotation: The gallery turns images automatically with a few-second interval and is perfect for displaying many images without any interference from the user.

Want free codes for stunning image sliders? Dive in now!

Technologies Used

To build the 3D Rotating Image Gallery, you’ll need to use the following programming languages and technologies:

  • HTML: For the structural layout of the gallery.
  • CSS: To style the gallery and add the 3D rotation effects.
  • JavaScript: For making the gallery interactive and enabling user-driven rotation.

Video Preview

Here is the video preview for 3D rotating image gallery:

Steps to Build 3D Rotating Image Gallery

The 3D Rotating Image Gallery is quite easy to implement even for those who have not developed web applications before. Follow these steps to create your gallery:

  • Create a Folder “Image Gallery”: First of all, you should open a new folder on your computer, and all the files, related to the project, should be saved in this folder.
  • Create an “images” Folder: In the “Image Gallery” folder, create a folder named “images” where actual images to be displayed in the gallery will be located.
  • Create “index.html”: For layout of the gallery create a new HTML file “index.html” in the folder “Image Gallery”.
  • Create “style.css”: Secondly, create another CSS document named ‘style.css’ in the same directory for the styling of the gallery.
  • Create “script.js”: Last of all, create a JavaScript file with a name “script.js” that will make your gallery interactive.

To implement code you may need VS Code Installation.

HTML

Here is the HTML code for your index.html file.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta tags for character set, compatibility mode, and responsive design --> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Page title --> <title>Rotating Image Gallery</title> <!-- Link to the external CSS stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- Container for the rotating images --> <div class="image-container"> <!-- Each span element represents an image in the gallery, with a custom property for rotation order --> <span style="--i: 1"> <img src="/images/book1.webp" alt=""> </span> <span style="--i: 2"> <img src="/images/book2.webp" alt=""> </span> <span style="--i: 3"> <img src="/images/book3.webp" alt=""> </span> <span style="--i: 4"> <img src="/images/book4.webp" alt=""> </span> <span style="--i: 5"> <img src="/images/book5.webp" alt=""> </span> <span style="--i: 6"> <img src="/images/book6.webp" alt=""> </span> <span style="--i: 7"> <img src="/images/book7.webp" alt=""> </span> <span style="--i: 8"> <img src="/images/book8.webp" alt=""> </span> </div> <!-- Container for the control buttons --> <div class="btn-container"> <!-- Previous button for rotating the gallery backwards --> <button class="btn" id="prev">Prev</button> <!-- Next button for rotating the gallery forwards --> <button class="btn" id="next">Next</button> </div> <!-- Link to the external JavaScript file --> <script src="script.js"></script> </body> </html>

CS

Here is the complete code for style.css file to style the gallery.

/* The body of the document is styled to center content both vertically and horizontally, with a white background, and overflow hidden to prevent scrollbars. */ body { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100vh; justify-content: center; background-color: #ffffff; overflow: hidden; } /* The container for the images, styled to have a 3D transform perspective, with a relative position to allow absolutely positioned child elements. */ .image-container { position: relative; width: 140px; height: 140px; margin-top: -200px; transform-style: preserve-3d; transform: perspective(1000px) rotateY(0deg); transition: transform 2.5s; } /* Each image span is positioned absolutely within the container, with a transform that rotates and translates it in 3D space. */ .image-container span { position: absolute; top: 0; left: 0; width: 100%; transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px); } /* Each image within the span is styled to fill the span, with a transition for transform and shadow effects. */ .image-container span img { position: absolute; left: 0; top: 0; width: 100%; transition: transform 0.5s, box-shadow 0.5s; box-shadow: 0 15px 50px rgba(0, 0, 0, 1.2); } /* The button container is relatively positioned and centered at 70% width. */ .btn-container { position: relative; width: 70%; } /* Common button styling: absolute positioning, background color, text color, no border, padding, border radius, and cursor style. */ .btn { position: absolute; bottom: -240px; background-color: #790251; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } /* Button hover effect to increase brightness. */ .btn:hover { filter: brightness(1.2); } /* Specific positioning for the previous button. */ #prev { left: 30%; } /* Specific positioning for the next button. */ #next { right: 30%; } /* Keyframes for the rotation animation: a full rotation around the Y-axis. */ @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

JavaScrip

This 3D Rotating Image Gallery remains interactive and dynamic as a result of Javascript. Here is the code for script.js file.

// Select the image container element where the images are displayed in 3D const imageContainerEl = document.querySelector(".image-container"); // Select the previous and next buttons by their respective IDs const prevEl = document.getElementById("prev"); const nextEl = document.getElementById("next"); // Initialize a variable to keep track of the current rotation angle let x = 0; // Declare a variable to hold the timer for automatic rotation let timer; // Add an event listener to the previous button // When the button is clicked, increase the rotation angle by 45 degrees // Clear any existing timer and update the gallery rotation prevEl.addEventListener("click", () => { x = x + 45; clearTimeout(timer); updateGallery(); }); // Add an event listener to the next button // When the button is clicked, decrease the rotation angle by 45 degrees // Clear any existing timer and update the gallery rotation nextEl.addEventListener("click", () => { x = x - 45; clearTimeout(timer); updateGallery(); }); // Function to update the gallery rotation function updateGallery() { // Apply the rotation transformation to the image container imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`; // Set a timer to automatically rotate the gallery every 3 seconds timer = setTimeout(() => { x = x - 45; updateGallery(); }, 3000); } // Initial call to start the gallery rotation updateGallery();

Download Source Code

3D Rotating Image Gallery source code is provided for free to download here. You can use in your projects without any copyright restrictions. The .zip folder contains all files, including images.

Conclusion

This HTML, CSS, and JavaScript 3D Rotating Image Gallery is a very useful addition to your website because it gives interesting and fascinating effects for your viewers. This code can be added to your projects and modified as per your requirement with little effort possible.

So, if you have enjoyed this tutorial I do recommend you to check out my channel (JV Codes) for more web development tutorials.

In case of any problem or suggestion, you can always leave a comment, and I will gladly help you.

Originally published at https://jvcodes.com on August 20, 2024.

Tags:

Post a Comment

0 Comments