css实现鼠标悬浮2021至2022文字数字三维过渡效果代码-html代码-BFW代码库

css实现鼠标悬浮2021至2022文字数字三维过渡效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标悬浮2021至2022文字数字三维过渡效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .num {
          width: 120px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          transform-style: preserve-3d;
        }
        .num > * {
          background: #333;
          aspect-ratio: 1;
          display: grid;
          transform-style: preserve-3d;
        }
        
        .num > *::before,
        .num > *::after {
          content: "";
          grid-area: 1/1;
        }
        .num > *::before {
          background: #222;
          transform-origin: right;
          transform: rotateY(-90deg);
        }
        .num > *::after {
          background: #111;
          transform-origin: bottom;
          transform: rotateX(90deg);
        }
        
        .two:before {
          content: "";
          grid-area: 2/1 / span 1 / span 2;
        }
        .two:after {
          content: "";
          grid-area: 4/2 / span 1 / span 2;
        }
        .zero:before {
          content: "";
          grid-area: 2/2 / span 3 / span 1;
        }
        .last {
          transform: translate(70%) rotateY(90deg);
          transform-origin: left;
        }
        .last.num > *::before {
          background: #333;
          transform-origin: left;
          transform: rotateY(90deg);
        }
        .last.num > * {
          background: #222;
        }
        body {
          display: grid;
          grid-auto-flow: column;
          grid-gap: 50px;
          transform: perspective(5000em) rotateY(0deg) rotateX(0deg);
          transform-style: preserve-3d;
          transition:1.2s;
        }
        html:hover body{
          transform: perspect.........完整代码请登录后点击上方下载按钮下载查看