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;
        }
        .l.........完整代码请登录后点击上方下载按钮下载查看