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%;
.........完整代码请登录后点击上方下载按钮下载查看