How to Create 3D Image Gallery using HTML, CSS & JavaScript | 3D Image Gallery

Creating 3D Image Gallery using HTML, CSS & JavaScript | 3D Image Gallery





Introduction:


Hello coders, welcome to codewithrandom. Today we'll boos our knowledge of front-end development by making this project called as 3D Image Gallery. Image Gallery is present of very few website mostly like MNCs have this section where they show the image of the their moments. But now we as a developer can also make creative by changing the way of presentation while showing the gallery. This project can help us to boost our knowledge as well as connect us with real-time example. The word 3D means three-dimensional which means we can witness the image gallery in 3D format. 


Let us see the coding of this project:


HTML Code:

 <a href="https://www.youtube.com/embed/LOm7j3aameE"><h1>3D Cube Image Gallery</h1>  
 <div class="cube-container">  
      <div class="cube initial-position">  
                <img class="cube-face-image image-1" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=300&h=300&fit=crop">  
                <img class="cube-face-image image-2" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=300&h=300&fit=crop">  
                <img class="cube-face-image image-3" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=300&h=300&fit=crop">  
                <img class="cube-face-image image-4" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=300&h=300&fit=crop">  
                <img class="cube-face-image image-5" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=300&h=300&fit=crop">  
                <img class="cube-face-image image-6" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=300&h=300&fit=crop">  
           </div>  
      </div>  
      <h2>Click the images below to rotate the cube</h2></a>  
      <div class="image-buttons">  
           <input type="image" class="show-image-1" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=100&h=100&fit=crop"></input>  
           <input type="image" class="show-image-2" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=100&h=100&fit=crop"></input>  
           <input type="image" class="show-image-3" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=100&h=100&fit=crop"></input>  
           <input type="image" class="show-image-4" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=100&h=100&fit=crop"></input>  
           <input type="image" class="show-image-5" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=100&h=100&fit=crop"></input>  
           <input type="image" class="show-image-6" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=100&h=100&fit=crop"></input>  
      </div>  
In this code we have linked some images and set a label under the heading tag. Let us see the HTML Output before writing CSS for the 3D Image Gallery.


HTML OUTPUT:














CSS Code:
 @import url(https://fonts.googleapis.com/css?family=Montserrat:500);  
 :root {  
      font-size: 10px;  
      --border-color: rgb(0, 143, 238);  
 }  
 * {  
      box-sizing: border-box;  
 }  
 body {  
      font-family: "Montserrat", Arial, sans-serif;  
      font-weight: 500;  
      line-height: 1.5;  
      text-align: center;  
      min-height: 100vh;  
      padding: 4rem 2rem;  
      color: #fafafa;  
      background-color: #080808;  
 }  
 h1 {  
      font-size: 4rem;  
      color: #0097fb;  
 }  
 h2 {  
      font-size: 2rem;  
      margin-bottom: 2.5rem;  
      color: #169af1;  
 }  
 .cube-container {  
      position: relative;  
      width: 30rem;  
      height: 30rem;  
      margin: 5rem auto 6rem;  
      perspective: 100rem;  
 }  
 .cube {  
      position: absolute;  
      width: 100%;  
      height: 100%;  
      transform-style: preserve-3d;  
      transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);  
 }  
 .cube-face-image {  
      display: block;  
      position: absolute;  
      box-shadow: 0 0 0.5rem #fff,   
                     0 0 1.5rem var(--border-color),  
                     0 0 3rem var(--border-color);  
 }  
 .image-buttons {  
      display: grid;  
      grid-template-columns: repeat(3, auto);  
      grid-gap: 1.5rem;  
      justify-content: center;  
 }  
 .image-buttons input {  
      border: 0.2rem solid #fafafa;  
 }  
In this snippet of CSS code we have first imported the fonts the styled the font for the whole page under the font family then set the presentation as cube given it as position then created a container and set the positioning for it so that it can't get messy.


 .image-buttons input:focus {  
      outline: none;  
      border: 0.2rem solid var(--border-color);  
 }  
 /* Transform images to create cube */  
 .image-1 {  
      transform: translateZ(15rem);  
 }  
 .image-2 {  
      transform: rotateX(-180deg) translateZ(15rem);  
 }  
 .image-3 {  
      transform: rotateY(90deg) translateZ(15rem);  
 }  
 .image-4 {  
      transform: rotateY(-90deg) translateZ(15rem);  
 }  
 .image-5 {  
      transform: rotateX(90deg) translateZ(15rem);  
 }  
 .image-6 {  
      transform: rotateX(-90deg) translateZ(15rem);  
 }  
 /* Transform cube to show correct image */  
 .cube.initial-position {  
      transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);  
 }  
 .cube.show-image-1 {  
      transform: translateZ(-15rem);  
 }  
 .cube.show-image-2 {  
      transform: translateZ(-15rem) rotateX(180deg);  
 }  
 .cube.show-image-3 {  
      transform: translateZ(-15rem) rotateY(-90deg);  
 }  
 .cube.show-image-4 {  
      transform: translateZ(-15rem) rotateY(90deg);  
 }  
 .cube.show-image-5 {  
      transform: translateZ(-15rem) rotateX(-90deg);  
 }  
 .cube.show-image-6 {  
      transform: translateZ(-15rem) rotateX(90deg);  
 }  
In this snippet of CSS we have set the presentation of images in the form of cube. We have given each rotation value for each image and specified the degree of the rotation. of the image. Let us see the CSS Output before writing the JavaScript for the 3D Image Gallery.

CSS Output:










JavaScript Code:

 window.addEventListener("DOMContentLoaded",     () => {  
      const cube = document.querySelector(".cube"),  
            imageButtons = document.querySelector(".image-buttons");  
      let cubeImageClass = cube.classList[1];  
      imageButtons.addEventListener("click", e => {  
           const targetNode = e.target.nodeName,  
                 targetClass = e.target.className;  
                if (targetNode === "INPUT" && targetClass !== cubeImageClass) {  
                console.log(`Show Image: ${targetClass.charAt(11)}`);  
                cube.classList.replace(cubeImageClass, targetClass);  
             cubeImageClass = targetClass;            
           }  
      });       
 });  

In this JS Code we have added an event listener for the whole window and set the functioning of the images so that when the user will click on the images which are there below while clicking the cube will rotate as per the degree defined in the CSS and the image will be presented. 

Let us see the output of this project.


Final Output:



Summary:

We have created a 3D Image Gallery using our tool HTML, CSS & JavaScript. First we have defined and linked all the images in the HTML File. Then in CSS we styled the page and set the form of presenting of the images in the form of Cube and setting the angle of rotation and in the JavaScript Code we have set the event listener for the whole window so that user user can go through the images which he clicks among the present one. If you loved it do comment as it boost our motivation to bring new projects for you guys. If you face any difficulty while performing you can reachout us with the help of comment section.

Happy Coding 

Post a Comment

Previous Post Next Post