gsap实现入栈三维动画效果代码-html代码-BFW代码库

gsap实现入栈三维动画效果代码

代码语言：html

所属分类：三维

代码描述：gsap结合css代码实现一个三维入栈动画效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .cuboid {
          width: 100%;
          height: 100%;
          position: relative;
        }
        .cuboid__side:nth-of-type(1) {
          height: calc(var(--thickness) * 1vmin);
          width: 100%;
          position: absolute;
          top: 0;
          transform: translate(0, -50%) rotateX(90deg);
        }
        .cuboid__side:nth-of-type(2) {
          height: 100%;
          width: calc(var(--thickness) * 1vmin);
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%) rotateY(90deg);
        }
        .cuboid__side:nth-of-type(3) {
          width: 100%;
          height: calc(var(--thickness) * 1vmin);
          position: absolute;
          bottom: 0;
          transform: translate(0%, 50%) rotateX(90deg);
        }
        .cuboid__side:nth-of-type(4) {
          height: 100%;
          width: calc(var(--thickness) * 1vmin);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%) rotateY(90deg);
        }
        .cuboid__side:nth-of-type(5) {
          height: 100%;
          width: 100%;
          transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
          position: absolute;
          top: 0;
          left: 0;
        }
        .cuboid__side:nth-of-type(6) {
          height: 100%;
          width: 100%;
          transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
          position: absolute;
          top: 0;
          left: 0;
        }
        *,
        *:after,
        *:before {
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background: var(--bg);
          overflow: hidden;
        }
        :root {
          --bg: #171726;
          --speed: 6;
          --delay-coefficient: -1.2s;
          --b-1: #e77b23;
          --b-2: #dc7118;
          --b-3: #cf6a17;
          --b-4: #b85e14;
          --t-1: #8c8273;
          --t-2: #70685c;
          --t-3: #544e45;
          --t-4: #38342e;
        }
        img {
          opacity: 0.25;
          position: fixed;
          height: 50vmin;
          top: 50%;
          left: 50%;
          transform: translate(-47.25%, -50%);
        }
        .scene {
          positio.........完整代码请登录后点击上方下载按钮下载查看