3D Cube Image Slider Using HTML, CSS And JavaScript

 

 

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

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 creating a 3D Cube Image Slider 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.

3D Cube Image Slider Preview

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Step 2: CSS Structure

* {
    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%.

Movie App using HTML, CSS, and Javascript

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.

Create A Travel Website Using HTML & CSS

Step 3: 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 a 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 center 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.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

Meanwhile, the mid-point of the distance between the front image and the 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 the 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 the left face of the cube having transform: rotateY(270deg) translate(-150px) this rotates the face by 270deg and translates 150px towards left on the x-axis.

Step 4: Buttons to slide images 

Add button 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 the previous-button and next-button.

Create Add To Cart Button Using HTML, CSS, & JavaScript

Step 5: 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, the 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)`;
});