3D Sliders using HTML and CSS

Share your love

Take your web design to the next dimension with 3D sliders! In this blog, we’ll explore how to create sleek and interactive 3D sliders using only HTML and CSS. By utilizing CSS 3D transforms, perspective, and smooth animations, we’ll design sliders that add depth and movement to your UI. Whether it’s for image galleries, product showcases, or interactive carousels, these sliders will bring a modern and dynamic feel to any project. Ready to slide into the world of 3D web design? Let’s start building!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen Sliders by Amit Sheen (@amit_sheen) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

</body>

</html>

Paste the below code in your <body> tag.

<div class="scene"> 
  
  <div class="back"></div>
  
  <div class="slider" style="--t: 0">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 1">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 2">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 3">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 4">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 5">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 6">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 7">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 8">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  <div class="slider" style="--t: 9">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
  </div>
  
  <div class="ball">
    <div class="innerBall"></div>
  </div>
</div>

CSS Code 

Create a file style.css and paste the code below.

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: #aaa;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 200vh;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  --duration: 16s;
  position: relative;
  animation: scene calc(var(--duration) * 2) infinite linear;
}

@keyframes scene {
  from { transform: rotate(0deg) rotateX(30deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(30deg) rotate(0deg); }
}

.back {
  position: absolute;
  inset: -200vh -40vh;
  background-color: #f00;
  transform: translateZ(-8vh);
  background:
    linear-gradient(to right, #aaa, transparent, #aaa),
    repeating-linear-gradient(#ddd 0 1vh, transparent 0 9.375vh) 0 0 / 100% 100%,
    conic-gradient(from 270deg at 1vh 50%, #ddd 0 90deg, transparent 0) 2vh 0 / 18.75vh 18.75vh,
    conic-gradient(from 270deg at 1vh 50%, #ddd 0 90deg, transparent 0) 11.375vh 9.375vh / 18.75vh 18.75vh;
  animation: sliderY var(--duration) infinite linear;
}

.slider {
  --delay: calc(var(--duration) / -10 * var(--t));
  
  position: absolute;
  animation: sliderY var(--duration) var(--delay) infinite linear;
  
  i {
    --border-color: hsl(calc(var(--t) * 36) 75% calc(var(--i) * 5% + 25%));
    
    position: absolute;
    inset: -12vh -8vh;
    border-radius: 50%;
    border: 1vh solid;
    transform: translateZ(calc(var(--i) * 0.3vh + 1vh));
    
    &::after {
      content: '';
      position: absolute;
      inset: -1vh;
      border: inherit;
      border-radius: inherit;
      transform: translateZ(-3.5vh);
    }
  }
  &::after {
    --border-color: #000;

    content: '';
    position: absolute;
    inset: -12vh -8vh;
    border-radius: 50%;
    border: 1vh solid;
    border-color: transparent transparent #000 #000;
    transform: translateZ(-8vh);
    filter: blur(1vh);
  }
  
  &:nth-child(odd) {
    --translateX: 10vh;

    i, &::after {
      border-color: transparent var(--border-color) var(--border-color) transparent;
    }
  }
  &:nth-child(even) {
    --translateX: -10vh;
    
    i, &::after {
      border-color: transparent transparent var(--border-color) var(--border-color);
    }
  }
}

@keyframes sliderY {
  from { translate: var(--translateX, 0) 93.75vh; }
  to { translate: var(--translateX, 0) -93.75vh; }
}

.ball {
  position: absolute;
  animation:
    ballX calc(var(--duration) / 5) infinite ease-in-out,
    ballY calc(var(--duration) / 10) calc(var(--duration) * -9.975) infinite;
  
  &::before {
    content: '';
    position: absolute;
    inset: -2vh;
    border-radius: 50%;
    background-color: #0007;
    transform: translateZ(-8vh);
    filter: blur(1vh);
  }
}

@keyframes ballX {
  0%, 100% { translate: 16vh; }
  50% { translate: -16vh; }
}

@keyframes ballY {
  0%, 100%{ transform: translateY(5vh); animation-timing-function: cubic-bezier(.3,.0,.58,1); }
  36% { transform: translateY(-5vh); animation-timing-function: cubic-bezier(.42,0,.7,1); }
}

.innerBall {
  position: absolute;
  inset: -2vh;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 15%, #fff, #000);
  animation: innerBall calc(var(--duration) * 2) infinite linear;
}

@keyframes innerBall {
  from { transform: rotate(0deg) rotateX(-30deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(-30deg) rotate(0deg); }
}

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/amit_sheen/pen/wvLGZRm

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts