3D Cube Slider using HTML CSS JavaScript

byCodingFlicks -March 22, 2023

0

Hello friends, today we will share with you a snippet about a 3D cube slider. 3D Cube Slider is a special type of interface that we see on various websites or web applications. Users can interact with the 3D slider cubes by clicking or swiping them, causing them to rotate or slide in different directions. Using 3D sliders on a website or app provides a visually engaging and interactive experience to the user. You can get an idea of what the Slider will look like by watching the video demo. There are more snippets on our website. To get them, click on the Load More button at the bottom of our home page.

Video Demo:

Hope you have watched the video demo. 3D cube sliders are commonly used to display featured content, such as products or services, or to highlight different aspects of a brand or organization. It is also used as an image gallery or in a portfolio website. The use of a 3D Cube Slider adds a different dimension to any website or app. Also, the interactive nature of this type of slider encourages users to explore and engage with the content.

You May Also Like:

3D Cube Slider using HTML CSS & JavaScript [ Source Code ]:

To create this slider, first, create an HTML file and a CSS file. You can create a separate js file and put the javascript part to initiate the slider. Make sure to link this file with your HTML file. In this snippet, we have put the js part below the HTML file. Then copy the code from the code box below and paste it into your files. If you see any problem by opening the project in your browser, then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- codingflicks.com -->
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Slider html css javascript</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <div class="slides">
          <div class="front">
            <img src="img/1.jpg" />
          </div>
          <div class="right">
            <img src="img/2.jpg" />
          </div>
          <div class="back">
            <img src="img/3.jpg" />
          </div>
          <div class="left">
            <img src="img/4.jpg" />
          </div>
        </div>
      </div>
      <div class="btn-area">
        <button id="prev">
          <i class="fas fa-arrow-left"></i>
        </button>
        <button id="next">
          <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>
    <script>
      let X = document.querySelector(".slides");
      let Y = document.getElementById("next");
      let Z = document.getElementById("prev"); 

      let pos = 0;

      Y.addEventListener("click", () => {
        pos -= 90;
        X.style.transform = `rotateY(${pos}deg)`;
      });
      Z.addEventListener("click", () => {
        pos += 90;
        X.style.transform = `rotateY(${pos}deg)`;
      });

    </script>
  </body>
</html>

ADD CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; 
}
body {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #f6ebd9 0%,
    #f6ebd9 50%,
    #729790 50%,
    #729790 100%
  );
}
.wrapper {
  height: 400px;
  width: 400px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: 50%;
}
.slides {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  position: relative;
  transition: 2s;
}
.slides div {
  height: 400px;
  width: 400px;
  position: absolute;
}
img {
	width: 100%;
	transform: translateZ(0);
	border: 10px inset deepskyblue;
}
.front {
  transform: translateZ(200px);
}
.right {
  transform: rotateY(-270deg) translateX(200px);
  transform-origin: 100% 0;
}
.back {
  transform: translateZ(-200px) rotateY(180deg);
}
.left {
  transform: rotateY(270deg) translateX(-200px);
  transform-origin: 0 50%;
}
.btn-area {
	margin-top: 80px;
	position: absolute;
	bottom: -35px;
	left: 33%;
}
.btn-area button {
	background-color: transparent;
	color: #fff;
	border: 3px solid #fff;
	padding: 5px 15px;
	font-size: 20px;
	cursor: pointer;
}

Hope your code is working fine. If the contents of our website have been beneficial to you, please share them with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.