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 bottom, #eee 20%, #bbb 40%);
        }
        .cube.one .top, .cube.two .top, .cube.three .top, .cube.four .top, .cube.five .top, .cube.six .top {
          transform: rotate(90deg) translateZ(3vw);
          background-size: 100% 100%;
          top: -50.5%;
          left: 51%;
          width: 16.2337662338vw;
          height: 25.35vw;
          border-radius: 1px;
        }
        .cube.one .top {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e9ced76b41d1.png");
        }
        .cube.two .top {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e9ced8a36cc5.png");
        }
        .cube.three .top {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e9ced984b1ea.png");
        
        }
        .cube.four .top {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e9ceda91739a.png");
        }
        .cube.five .top {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e9cedbfbccd0.png");
        }
        .cube.six .top {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e9cedd7e8c20.png");
        }
        .cube:hover {
          cursor: pointer;
        }
        
        @media screen and (max-width: 750px) {
          .grid {
            padding-right: 10rem;
            max-width: 80ch;
          }
        }
        @media screen and (max-width: 450px) {
          .grid {
            padding-right: 5rem;
            max-width: 80ch;
          }
        }
    </style>



</head>

<body>
    <section class="grid">
        <div class="cube one">
            <div class="cube front face"></div>
            <div class="cube back face"></div>
            <div class="cube right face"></div>
            <div class="cube left face"></div>
            <div class="cube top face"></div>
            <div class="cube bottom face"></div>
            <div class="cube shadow"></div>
        </div>
        <div class="cube two">
            <div class="cube front face"></div>
            <div class=&qu.........完整代码请登录后点击上方下载按钮下载查看