You are currently viewing 3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript
3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

 

Welcome to the Codewithrandom blog. In this blog, we learn how to create 3D Image Gallery with Rotating Image. We use Html, Css, and JavaScript for this 3D Image Gallery.

I hope you enjoy our blog so let’s start with a basic Html Structure for the 3D Image Gallery

HTML Code For 3D Image Gallery

Table of Contents

<main></main>

There is all the Html code for the 3D Image Gallery. Now, you can see output without Css and JavaScript Code. then we Write Css for styling the 3D Image Gallery and use JavaScript for the 3D Image Gallery with Rotating Images.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

Only HTML Code Output

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript
Blank Output With Blank Html Tag

CSS Code For 3D Image Gallery

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
perspective: 800px;
overflow: hidden;
display: grid;
place-items: center;
background: linear-gradient(#3a4149, #111722);
}
main {
position: relative;
transform-style: preserve-3d;
width: 50vmin;
height: 75vmin;
transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
article {
position: absolute;
inset: 0;
-webkit-box-reflect: below 50px linear-gradient(transparent, rgba(255, 255, 255, 0.15));
}
article button {
border: 0;
outline: 0;
cursor: pointer;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 5%;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
article button:focus-visible {
box-shadow: 0 0 0 3px cyan;
}
article button:focus {
box-shadow: 0 0 0 3px cyan;
}
article button:focus:not(:focus-visible) {
box-shadow: none;
}
article button:hover, article button:focus, article button:hover img, article button:focus img {
transform: scale(1.07);
}

50+ Html ,Css & Javascript Projects With Source Code

Html + Css Updated Output

JavaScript Code For 3D Image Gallery

/**
* Initially the elements are positioned in front of the camera.
* We define here the transformations to position them in the scene.
* When clicking on an item, we apply the inversed transformation but on the main container to "zoom" on the item
*/
const articles = new Map([
["6392322", { tx: "-90%", tz: "-70vmin", ry: "60deg" }],
["1761279", { tz: "-110vmin" }],
["1679772", { tx: "90%", tz: "-70vmin", ry: "-60deg" }]
]);
window.addEventListener("load", () => {
const main = document.querySelector("main");
for (const [id, { tx, tz, ry }] of articles.entries()) {
main.appendChild(makeArticleElement(id, tx, tz, ry));
}
document.addEventListener("click", ({ target }) => {
const targetId = target.closest("article")?.id;
let [itx, itz, iry] = [0, 0, 0]; // inversed transformation to apply to the main element
if (targetId && main.dataset.focus !== targetId) {
// zoom in
const { tx, tz, ry } = articles.get(targetId) || {};
[itx, itz, iry] = [tx, tz, ry].map(inverseTransformation);
main.setAttribute("data-focus", targetId);
} else {
// zoom out
main.removeAttribute("data-focus");
}
main.style.transform = `rotateY(${iry}) translate3d(${itx}, 0, ${itz})`;
});
});
// e.g. turn "90%" into "-90%" or "-10vmin" into "10vmin"
function inverseTransformation(transform) {
if (!transform) return 0;
const [_, value, unit] = transform.match(/(-?d+)(.*)/);
return `${-Number(value)}${unit}`;
}
function makeArticleElement(id, tx = 0, tz = 0, ry = 0) {
const img = document.createElement("img");
img.src = `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500`;
const button = document.createElement("button");
button.appendChild(img);
const element = document.createElement("article");
element.id = id;
element.style.transform = `translate3d(${tx}, 0, ${tz}) rotateY(${ry})`;
element.appendChild(button);
return element;
}

Final Output Of 3D Image Gallery with Rotating Image

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript
3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

 

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript
3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

 

3D Image Gallery with Rotating Image HTML ,CSS & JavaScript
3D Image Gallery with Rotating Image HTML ,CSS & JavaScript

 

Now that we have completed our 3D Image Gallery with Rotating Images. Here is our updated output with Html, Css, and JavaScript. Hope you like the 3D Image Gallery with Rotating Images. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a 3D Image Gallery with Rotating Images Using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki
Code by – Julien Sulpis

Leave a Reply