How to make a 3D Image Slider Cube | Image Slider – codewithrandom







How to make a 3D Image Slider Cube

| Image Slider – codewithrandom




Hello and welcome to our new mini-project, in which we will demonstrate how to create a 3D picture

slider cube.


It’s a really common component that you’ve probably seen on a lot of websites.

We’ll take a step-by-step approach to create a 3D Image Slider Cube in this article.


Prerequisites for this project:


This article requires a basic understanding of HTML, CSS, and a little bit of Javascript. I’ll explain the

project in a manner that makes it easy to follow even for complete beginners with a basic understanding

of the listed technologies.

Project Goal:


This short video is our end project after completion. We will create a 3d image slider cube, and two

navigation buttons to slide our cube — previous & next buttons. 

See the Pen Untitled by Ankit Joshi (@ankit9015) on CodePen.

 Step 1: HTML structure


Create the boilerplate HTML and connect it with CSS and Javascript files.

Once done, let’s look at the body element of our webpage. Here, we will create a structure for our

image slider cube.

 <div class="wrapper">  
<div class="container">
<div class="image-cube">
</div>
</div>
</div>

Here, we have created three div elements — a component wrapper, a container

, and an image cube.


CSS:

 * {  
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #9cd2d8;
}
.wrapper {
border: 1px solid #ffffff;
height: 300px;
width: 300px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
perspective-origin: 50%;
}
.image-cube {
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: relative;
transition: 2s;
}

In the CSS file, the wrapper is positioned absolute, which means its position is set relative to its parent

element i.e. body for this case. We centered the wrapper using margin: auto. Read more about “position

in CSS”.


The container element has a flex display and is taking all the space of its parent element. Container

element has perspective: 800px and perspective-origin: 50%.


The perspective attribute in CSS defines the distance of z-index = 0 plane from the user, hence adds

perspective for the 3D-positioned element. 


Greater perspective value means farther the z-index=0 plane from the user (or screen) and smaller the

value means the z-index=0 plane is much closer. Lesser perspective values really enhance the 3D

object as it causes large transformation. Read more about perspective in CSS.


The perspective-origin specifies the vanishing point in CSS, which gives us the line of sight and the respective position of the viewer.


The image-cube div contains transform-style: preserve-3d which creates a 3D figure where all the child

elements of the object will now become the faces of the 3d object. However, currently, they are stacked

over one another, and we have to configure the style of each face. 


There is also a transition: 2s attribute in the image cube which slows the transition and takes 2s for

every sliding operation.


Step 2: Add images to the slider


Next, we add images to the cube and configure the style of all the faces to make it a cube. We know,

that in a cube all the faces are at 90 degrees with each other. Thus, we will also configure the child

elements of the image-cube (i.e. faces) to be at 90 degrees with each other.

 <div class="front">  
<img src="https://images.unsplash.com/photo-1635353019337-d37813892542?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNDg3NQ&ixlib=rb-1.2.1&q=85" />
</div>
<div class="right">
<img src="https://images.unsplash.com/photo-1635320623348-bb1f46428927?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNDg3NQ&ixlib=rb-1.2.1&q=85" />
</div>
<div class="back">
<img src="https://images.unsplash.com/photo-1635355811454-d2371b64dfe8?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNDg3NQ&ixlib=rb-1.2.1&q=85" />
</div>
<div class="left">
<img src="https://images.unsplash.com/photo-1635261155180-77111688b0cf?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNTEyMA&ixlib=rb-1.2.1&q=85" />
</div>

Styling the image cube to create a 3D cube

 .image-cube {  
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: relative;
transition: 2s;
}
.image-cube div {
height: 300px;
width: 300px;
position: absolute;
}
img {
width: 100%;
height: 100%;
transform: translateZ(0);
}
.front {
transform: translateZ(150px);
}
.right {
transform: rotateY(-270deg) translateX(150px);
transform-origin: 100% 0;
}
.back {
transform: translateZ(-150px) rotateY(180deg);
}
.left {
transform: rotateY(270deg) translateX(-150px);
transform-origin: 0 50%;
}

All the child div elements of the image cube will have position: absolute, hence they remain positioned

relative to the image cube.


All image elements have transform: translateZ(0) that sets them at z-index = 0, which is the centre of

the cube.


We translate the front face from z=0 to z=150 (positive z value means the object is closer to the screen)

. On the opposite, the back face has a z-value = -150 which translates it away from the screen.

Meanwhile, the mid-point of the distance between the front image and back image lies on z-value = 0.

Moreover, the back image is rotated by 180 degrees to make it similar to a cube in the real world.


Transform right face and rotate it across Y-axis by -270deg and translate on X-axis by 150px right of its

original position. On the opposite, we have left face of the cube having transform: rotateY(270deg)

translate(-150px) this rotates the face by 270deg and translate 150px towards left on the x-axis.


Step 3: Buttons to slide images


Add buttons components inside the wrapper after the container.

 <div class="btns">  
<button id="prev">
<i class="fas fa-arrow-left"></i>
</button>
<button id="next">
<i class="fas fa-arrow-right"></i>
</button>
</div>

CSS for buttons:

 .btns {  
margin-top: 80px;
display: flex;
justify-content: space-between;
}
.btns button {
background-color: transparent;
color: #ffffff;
border: 3px solid #ffffff;
background: #0a3342;
padding: 8px 40px;
border-radius: 20px;
font-size: 20px;
cursor: pointer;
}

This is just basic HTML and CSS where we are creating and styling previous-button

and next-button.


Step 4: Adding sliding function to the buttons


First, we assign the HTML element to the variables in our javascript file.


 let cube = document.querySelector(".image-cube");  
let btnNext = document.getElementById("next");
let btnPrev = document.getElementById("prev");

Then create variable pos = 0, which specifies the angle of rotation of the whole image cube. Here

pos = 0, which means that under normal conditions this slider will be at zero degrees angle.


Finally, add event listeners for button clicks — where, next button rotates the cube by -90 degrees and

the previous button rotates the cube by 90 degrees.


 let pos = 0;  
btnNext.addEventListener("click", () => {
pos -= 90;
cube.style.transform = `rotateY(${pos}deg)`;
});
btnPrev.addEventListener("click", () => {
pos += 90;
cube.style.transform = `rotateY(${pos}deg)`;
});

Similarly, for the previous button, we increase the pos by 90 for every click. And rotate the cube by

90deg on the Y-axis.


Written by: Ankit Joshi


Add any image you like to the cube and you have the 3d image slider cube

ready to use.

Check out more…..

Share on:

Leave a Comment