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

代码语言：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) * 1vmin);
          width: calc(var(--size) * 1vmin);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(var(--head-size)) translate(calc(var(--translate-x, 0) * 1%), calc(var(--translate-y, 0) * 1%));
        }
        .block-head__img:not([src]) {
          display: none;
        }
        .block-head__side {
          height: 100%;
          position: absolute;
          width: 100%;
          top: 50%;
          left: 50%;
          background-repeat: no-repeat;
          overflow: hidden;
          background: var(--gradient-two, #00f);
        }
        .block-head__side:after {
          content: '';
          z-index: -1;
          position: absolute;
          top: 50%;
          left: 50%;
          background: radial-gradient(circle at calc(var(--gradient-x, 50) * 1%) calc(var(--gradient-y, 50) * 1%), var(--gradient-one, #008000), var(--gradient-two, #00f) calc(var(--gradient-stop, 100) * 1%));
          height: 100%;
          width: 100%;
          transform: translate(-50%, -50%) scale(calc(5 * var(--head-size))) translate(calc(var(--translate-x, 0) * 1%), calc(var(--translate-y, 0) * 1%));
        }
        .block-head__side:nth-of-type(1) {
          transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--size) * var(--height, 1)) * 0.5vmin)) rotate(90deg);
          filter: brightness(1.2);
        }
        .block-head__side:nth-of-type(1) img,
        .block-head__side:nth-of-type(1):after {
          top: calc((100 + (var(--height, 1) * 50)) * 1%);
        }
        .block-head__side:nth-of-type(2) {
          transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--size) * var(--height, 1)) * -0.5vmin)) rotate(90deg);
          filter: brightness(0.5);
        }
        .block-head__side:nth-of-type(2):after,
        .block-head__side:nth-of-type(2) img {
          top: calc((100 + (var(--height, 1) * 50)) * 1%);
          transform: translate(-50%, -50%) scale(var(--head-size)) rotateY(180deg) rotate(180deg) translate(calc(var(--translate-x, 0) * 1%), calc(var(--translate-y, 0) * 1%));
        }
        .block-head__side:nth-of-type(3) {
          transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--size) * -0.5vmin)) rotateX(180deg);
          filter: brightness(0.62);
          height: calc(var(--height, 1) * 100%);
        }
        .block-head__side:nth-of-type(3):after,
        .block-head__side:nth-of-type(3) img {
          left: -50%;
        }
        .block-head__side:nth-of-type(4) {
          transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * -0.5vmin)) rotateY(180deg);
          filter: brightness(1.2);
          height: calc(var(--height, 1) * 100%);
        }
        .block-head__side:nth-of-type(4):after,
        .block-head__side:nth-of-type(4) img {
          left: calc((100 + (var(--height, 1) * 50)) * 1%);
        }
        .block-head__side:nth-of-type(5) {
          display: block;
          height: calc(var(--height, 1) * 100%);
          transform: translate(-50%, -50%) rotate(90deg) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * -0.5vmin)) rotateY(180deg);
        }
        .block-head__side:nth-of-type(6) {
          height: calc(var(--height, 1) * 100%);
          transform: translate(-50%, -50%) rotate(-90deg) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * -0.5vmin)) rotateY(180deg);
        }
    </style>



</head>

<body>
    <div class="instructions">
        <h1>Block yo self!</h1>
        <h2>Drag and drop or <button class="image-selector">select</button> an image to start</h2><i>1:1 aspect ratio with background removed for best results</i>
    </div>
    <div class="screenshot">
        <div class="wrapper">
            <div class="scene">
                <div class="block-head">
                    <div class="block-head__side"><img class="block-head__img" /></div>
                    <div class="block-head__side"><img class="block-head__img" /></div>
                    <div class="block-head__side"><img class="block-head__img" /></div>
                    <div class="block-head__side"><img class="block-head__img" /></div>
                    <div class="block-head__side"></div>
                    <div class="block-head__side"><img class="block-head__img" /></div>
                </div>
            .........完整代码请登录后点击上方下载按钮下载查看