gsap+css实现可拖动3d三维立体滑块拖动效果代码-html代码-BFW代码库

gsap+css实现可拖动3d三维立体滑块拖动效果代码

代码语言：html

所属分类：拖放

代码描述：gsap+css实现可拖动3d三维立体滑块拖动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #222222;
}

* {
  transform-style: preserve-3d;
}

.bar {
  width: 50vmin;
  height: 10vmin;
  position: relative;
}

#range {
  width: 100%;
  height: 100%;
  position: absolite;
  opacity: 0;
}

#range::-webkit-slider-thumb,
#range::-moz-range-thumb {
  appearance: none;
  height: 100%;
  width: 20px;
  background-color: green;
}

.progress {
  --width: 100%;
  --height: 9vmin;
  --depth: 9vmin;
  --hue: 220;
  --sat: 50%;
  --opac: .6;
  --progress: 50%;
  width: var(--width);
  height: var(--height);
  position: absolute;
  top: 0;
  transform:
    perspective(300px)
    rotateX(45deg)
    rotateY(0deg)
    rotateZ(0deg);
  pointer-events: none;
}

.cuboid {
  width: var(--width);
  height: var(--height);
}

.cuboid .back {
  width: var(--width);
  height: var(--depth);
  position: absolute;
  transform:
    rotateX(90deg)
    translate3d(
      0px,
      0px,
      calc( var(--depth) / 2 )
    );
  background: linear-gradient(
    to right,
    hsl(20, 50%, 60%, var(--opac)) var(--progress),
    hsl(220, 50%, 80%, var(--opac)) var(--progress)
  );
}

.cuboid .right {
  height: 100%;
  width: var(--depth);
  position: absolute;
  right: 0px;
  transform:
    rotateY(90deg)
    translate3d(
      0px,
      0px,
      calc( var(--depth) / 2 )
    );
  background-color: hsl(var(--hue), var(--sat), 50%, var(--opac));
}

.cuboid .left {
  height: 100%;
  width: var(--depth);
  position: absolute;
  left: 0px;
  transform:
    rotateY(90deg)
    translate3d(
      0px,
      0px,
      calc( var(--depth) / -2 )
    );
  background-color: hsl(20, var(--sat), 50%, var(--opac));
}

.cuboid .center {
  height: 100%;
  width: var(--depth);
  position: absolute;
  left: var(--progress);
  transform:
    rotateY(90deg)
    translate3d(
      0px,
      0px,
      calc( var(--depth) / -2 )
    );
  background-color: hsl(20, 50%, 50%, 1);
}

.cuboid .bottom {
  width: var(--width);
  height: var(--height);.........完整代码请登录后点击上方下载按钮下载查看