Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Rotating Image Gallery" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Rotating Image Gallery" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Rotating Image Gallery [Source Code]
To get the following HTML, CSS & JS code for the Rotating Image Gallery project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rotating Image Gallery</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- The below images links are from picsum website --> <div class="image-container"> <span style="--i: 1"> <img src="https://picsum.photos/id/237/300/200"> </span> <span style="--i: 2"> <img src="https://picsum.photos/id/21/300/200"> </span> <span style="--i: 3"> <img src="https://picsum.photos/id/32/300/200"> </span> <span style="--i: 4"> <img src="https://picsum.photos/id/48/300/200"> </span> <span style="--i: 5"> <img src="https://picsum.photos/id/25/300/200"> </span> <span style="--i: 6"> <img src="https://picsum.photos/id/10/300/200"> </span> <span style="--i: 7"> <img src="https://picsum.photos/id/8/300/200"> </span> <span style="--i: 8"> <img src="https://picsum.photos/id/18/300/200"> </span> </div> <div class="buttons"> <button class="btn prev">Prev</button> <button class="btn next">Next</button> </div> <script src="index.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: black; overflow: hidden; } .image-container { position: relative; width: 200px; min-height: 200px; transform-style: preserve-3d; transform: perspective(1000px) rotateY(0deg); transition: all 1s ease-in-out; } .image-container span { position: absolute; top: 0; left: 0; width: 100%; transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px); } .image-container span img { position: absolute; left: 0; top: 0; width: 100%; } .buttons { position: relative; width: 80%; } .btn { position: absolute; bottom: -80px; background-color: green; border: none; color: white; padding: 10px 30px; font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 5px; cursor: pointer; } .btn:hover { filter: brightness(1.5); } .btn:active { transform: scale(0.95); } .prev { left: 20%; } .next { right: 20%; }
const imageContainerEl = document.querySelector(".image-container"); const prevEl = document.querySelector(".prev"); const nextEl = document.querySelector(".next"); let x=0; let timer=0; prevEl.addEventListener("click",()=>{ x = x + 45; clearTimeout(timer); updateContainer(); }) nextEl.addEventListener("click",()=>{ x = x - 45; clearTimeout(timer); updateContainer(); }) function updateContainer(){ imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`; timer = setTimeout(() => { x = x - 45; updateContainer(); }, 2000); } updateContainer();