div+css实现三维数字翻页滚动计数器动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现三维数字翻页滚动计数器动画效果代码，鼠标悬浮三维倾斜。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
        * {
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        
        body {
          margin: 0;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          font-family: "Anton", Arial, Helvetica, serif;
          background: linear-gradient(#030a03, #4e6c7a, #030a03);
        }
        
        .container {
          width: 100vw;
          height: 100vh;
          position: absolute;
          overflow: hidden;
          left: 0;
          top: 0;
          perspective: 100vmin;
          cursor: default;
        }
        
        .cam {
          float: left;
          width: 11.11%;
          height: 11.11%;
          z-index: 1;
          position: relative;
          cursor: zoom-in;
        }
        .cam:nth-child(1):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(-40deg) translateZ(-10vmin);
        }
        .cam:nth-child(2):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(-30deg) translateZ(-10vmin);
        }
        .cam:nth-child(3):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(-20deg) translateZ(-10vmin);
        }
        .cam:nth-child(4):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(-10deg) translateZ(-10vmin);
        }
        .cam:nth-child(5):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(0deg) translateZ(-10vmin);
        }
        .cam:nth-child(6):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(10deg) translateZ(-10vmin);
        }
        .cam:nth-child(7):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(20deg) translateZ(-10vmin);
        }
        .cam:nth-child(8):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(30deg) translateZ(-10vmin);
        }
        .cam:nth-child(9):hover ~ .container .number {
          transform: rotateX(12deg) rotateY(40deg) translateZ(-10vmin);
        }
        .cam:nth-child(10):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(-40deg) translateZ(-10vmin);
        }
        .cam:nth-child(11):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(-30deg) translateZ(-10vmin);
        }
        .cam:nth-child(12):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(-20deg) translateZ(-10vmin);
        }
        .cam:nth-child(13):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(-10deg) translateZ(-10vmin);
        }
        .cam:nth-child(14):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(0deg) translateZ(-10vmin);
        }
        .cam:nth-child(15):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(10deg) translateZ(-10vmin);
        }
        .cam:nth-child(16):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(20deg) translateZ(-10vmin);
        }
        .cam:nth-child(17):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(30deg) translateZ(-10vmin);
        }
        .cam:nth-child(18):hover ~ .container .number {
          transform: rotateX(9deg) rotateY(40deg) translateZ(-10vmin);
        }
        .cam:nth-child(19):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(-40deg) translateZ(-10vmin);
        }
        .cam:nth-child(20):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(-30deg) translateZ(-10vmin);
        }
        .cam:nth-child(21):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(-20deg) translateZ(-10vmin);
        }
        .cam:nth-child(22):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(-10deg) translateZ(-10vmin);
        }
        .cam:nth-child(23):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(0deg) translateZ(-10vmin);
        }
        .cam:nth-child(24):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(10deg) translateZ(-10vmin);
        }
        .cam:nth-child(25):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(20deg) translateZ(-10vmin);
        }
        .cam:nth-child(26):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(30deg) translateZ(-10vmin);
        }
        .cam:nth-child(27):hover ~ .container .number {
          transform: rotateX(6deg) rotateY(40deg) translateZ(-10vmin);
        }
        .cam:nth-child(28):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(-40deg) translateZ(-10vmin);
        }
        .cam:nth-child(29):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(-30deg) translateZ(-10vmin);
        }
        .cam:nth-child(30):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(-20deg) translateZ(-10vmin);
        }
        .cam:nth-child(31):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(-10deg) translateZ(-10vmin);
        }
        .cam:nth-child(32):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(0deg) translateZ(-10vmin);
        }
        .cam:nth-child(33):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(10deg) translateZ(-10vmin);
        }
        .cam:nth-child(34):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(20deg) translateZ(-10vmin);
        }
        .cam:nth-child(35):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(30deg) translateZ(-10vmin);
        }
        .cam:nth-child(36):hover ~ .container .number {
          transform: rotateX(3deg) rotateY(40deg) translateZ(-10vmin);
        }
        .cam:nth-child(37):hover ~ .container .number {
          transform: rotateX(0deg) rotateY(-40deg) translateZ(-10vmin);
        }
        .cam:nth-child(38):hover ~ .container .number {
          transform: rotateX(0deg) rotateY(-30deg) translateZ(-10vmin);
        }
        .cam:nth-child(39):hover ~ .container .number {
          transform: rotateX(0deg) rotateY(-20deg) translateZ(-10vmin);
        }
        .cam:nth-child(40):hover ~ .container .number {
          transform: rotateX(0deg) rotateY(-10deg) translateZ(-10vmin);
        }
        .cam:nth-child(41):hover ~ .container .number {
          transform: rotateX(0deg) rotateY(0deg) translateZ(-10vmin);
        }
 .........完整代码请登录后点击上方下载按钮下载查看