gsap是一个自定义封面图片的三维立方体盒子交互效果代码-html代码-BFW代码库

gsap是一个自定义封面图片的三维立方体盒子交互效果代码

代码语言：html

所属分类：三维

代码描述：gsap是一个自定义封面图片的三维立方体盒子交互效果代码，可通过dat-gui修改参数。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
        *,
        *:after,
        *:before {
          box-sizing: border-box;
        }
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background: #050505;
          touch-action: none;
          font-family: 'Audiowide', cursive;
        }
        :root {
          --size: 28;
          --head-size: 3.2;
          --rotate-x: -26;
          --rotate-y: 45;
          --allow-parallax: 0.25;
        }
        .wrapper {
          perspective: 10000vmin;
          transform: translate3d(0, 0, 100vmin) rotateX(calc((clamp(-1, var(--parallax-y, 0), 1) * var(--allow-parallax)) * -90deg)) rotateY(calc((clamp(-1, var(--parallax-x, 0), 1) * var(--allow-parallax)) * 90deg)) rotateY(calc(var(--spin, 0) * 1deg));
        }
        .instructions {
          color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .instructions a {
          color: #d9f;
        }
        .sr-only,
        input[type='file'] {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
        }
        .screenshot {
          height: calc(var(--size) * 1.65vmin);
          width: calc(var(--size) * 1.65vmin);
          display: grid;
          place-items: center;
          transform-style: preserve-3d;
        }
        .screenshot *,
        .screenshot *:before,
        .screenshot *:after {
          transform-style: preserve-3d;
        }
        .scene {
          transform: rotateX(calc(var(--rotate-x) * 1deg)) rotateY(calc(var(--rotate-y) * 1deg)) rotateX(90deg);
        }
        .block-head {
          height: calc(var(--size) * 1vmin);
          position: relative;
          width: calc(var(--size) * 1vmin);
          display: none;
        }
        .block-head__img {
          position: absolute;
          height: calc(var(--size).........完整代码请登录后点击上方下载按钮下载查看