Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript







Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a 3d Gallery. We use HTML, Css, and javascript for this 3d Gallery. I hope you enjoy our blog so let’s start with a basic HTML structure for the 3d Gallery.

HTML Code

 <main></main>  

There is all the HTML code for the 3d Gallery. Now, you can see an output with 3d Gallery then we write javascript for 3d Gallery.

output

Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript
Blank Output With Blank Html Tag 

CSS code

 * {  
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);
}

Css Updated output


Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript

Javascript code

 /**  
* 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

Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript

Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript

Pure Css 3d Rotating Image Gallery | 3d Gallery With Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the3d Gallery. 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 Gallery using simple 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

Share on:

Leave a Comment