gsap实现立体书本点击摆正动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap通过tweens实现立体书本书籍点击后自动摆正动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        
        body {
          margin: 0;
          padding: 0;
          background: #eeeeeb;
          background: #FDF4E3;
          background: #FFFAEF;
          background: #F7F3EB;
          background: #fff;
          background: #c8c8c8;
          background: #FCF9DA;
          background: #FCECDA;
          background: #FFF2E3;
          background: #F7F1EA;
          overflow-x: hidden;
        }
        
        /* Cube mixing credit: @rolivaalonso */
        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
          gap: 21vw;
          max-width: 140ch;
          margin: 4rem auto 4rem;
          margin-bottom: 10rem;
          padding: 1.5rem 3rem;
          padding-right: 13rem;
          height: 100%;
          width: 100%;
        }
        
        .face {
          position: absolute;
        }
        
        .cube {
          width: 25vw;
          height: 3vw;
          transform: perspective(9999px) rotateX(53deg) rotateZ(-50deg);
          transform: perspective(9999px) rotateX(53deg) rotateZ(-60deg);
          top: -50%;
          left: -50%;
          margin-bottom: 2.25rem;
        }
        .cube.front {
          width: 25vw;
          height: 3vw;
          -webkit-transform-origin: bottom left;
          -ms-transform-origin: bottom left;
          transform-origin: bottom left;
          -webkit-transform: rotateX(-90deg) translateZ(13vw);
          transform: rotateX(-90deg) translateZ(13vw);
        }
        .cube.back {
          width: 25vw;
          height: 3vw;
          -webkit-transform-origin: top left;
          -ms-transform-origin: top left;
          transform-origin: top left;
          -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-25vw) translateY(-3vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-25vw) translateY(-3vw);
        }
        .cube.right {
          width: 16vw;
          height: 3vw;
          -webkit-transform-origin: top left;
          -ms-transform-origin: top left;
          transform-origin: top left;
          -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(25vw) translateX(-16vw) translateY(-3vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(25vw) translateX(-16vw) translateY(-3vw);
        }
        .cube.left {
          width: 16vw;
          height: 3vw;
          -webkit-transform-origin: top left;
          -ms-transform-origin: top left;
          transform-origin: top left;
          -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
        }
        .cube.bottom {
          width: 25vw;
          height: 16vw;
          -webkit-transform-origin: top left;
          -ms-transform-origin: top left;
          transform-origin: top left;
          -webkit-transform: rotateY(180deg) translateX(-25vw);
          transform: rotateY(180deg) translateX(-25vw);
        }
        .cube.top {
          width: 25vw;
          height: 16vw;
          -webkit-transform-origin: top left;
          -ms-transform-origin: top left;
          transform-origin: top left;
          -webkit-transform: translateZ(3vw);
          transform: translateZ(3vw);
        }
        .cube.front, .cube.back, .cube.right, .cube.left, .cube.top, .cube.bottom {
          background-color: #f06;
          background-color: #13D1C6;
          background-color: #fff;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .cube.left {
          --b: .5;
          border-bottom: 3px solid #333;
          border-bottom: calc(var(--b) * 1vmin) solid #333;
          border-left: 3px solid #333;
          border-left: calc(var(--b) * 1vmin) solid #333;
          border-right: none;
          background: repeating-linear-gradient(to bottom, #eee 30%, #AAA 32%);
          background: repeating-linear-gradient(to bottom, #eee 20%, #ccc 32%);
          background: repeating-linear-gradient(to bottom, #eee 20%, #bbb 30%);
        }
        .cube.front, .cube.back {
          --b: .6;
          border-bottom: 3px solid #333;
          border-bottom: calc(var(--b) * 1vmin) solid #333;
          background: repeating-linear-gradient(to bottom, #fff 30%, #ddd 32%);
          background: repeating-linear-gradient(to b.........完整代码请登录后点击上方下载按钮下载查看