gsap实现三维文字立方体旋转动画效果代码-html代码-BFW代码库

gsap实现三维文字立方体旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现三维文字立方体旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'>

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Krona+One&display=swap");
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
          width: 100%;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #000;
        }
        
        .scene {
          perspective: 600px;
          display: flex;
          flex-direction: column;
        }
        
        .cube {
          width: 240px;
          height: 60px;
          position: relative;
          transform-style: preserve-3d;
        }
        
        .cube__face {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          backface-visibility: hidden;
          font-family: "Krona One";
          font-size: 3rem;
        }
        
        .cube__face--front,
        .cube__face--right {
          background: var(--bg);
          background-size: 400% 200%;
          background-position: 100% 50%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        .cube__face--front {
          transform: rotateY(0deg) translateZ(120px);
          --bg: linear-gradient(-75deg, white 20%, black 50%);
        }
        
        .cube__face--right {
          transform: rotateY(90deg) translateZ(120px);
          --bg: linear-gradient(-75deg, black 20%, white 50%);
        }
        
        .support {
          position: absolute;
          right: 10px;
          bottom: 10px;
          padding: 10px;
          display: flex;
        }
        .support a {
          margin: 0 10px;
          color: #fff;
          font-size: 1.8rem;
          backface-visibility: hidden;
          transition: all 150ms e.........完整代码请登录后点击上方下载按钮下载查看