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

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

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