jquery+css实现立体方块翻转显示数字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery+css实现立体方块翻转显示数字动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
        .timerWrap {
      background: black;
      box-shadow: 40px 20px 110px rgba(0, 0, 0, 0.1), 110px 110px 300px rgba(0, 0, 0, 0.4), 10px 60px 140px rgba(0, 0, 0, 0.5);
      border-radius: 6px;
      margin: 50px;
    }
    
    .row {
      height: 106.5px;
      perspective: 900px;
      box-shadow: 0 10px 50px #000;
    }
    .row .cube:nth-of-type(2) {
      position: relative;
      z-index: 1;
    }
    .row:last-of-type {
      height: 100px;
    }
    
    .cube {
      width: 100px;
      height: 100px;
      display: inline-block;
      transition: transform 1s;
      transform-style: preserve-3d;
      float: left;
      color: #666;
      font-size: 0.8em;
      margin-bottom: 3px;
      margin: 0.5px;
    }
    .cube > div {
      position: absolute;
      border: 1px solid rgba(0, 0, 0, 0.3);
      width: 100px;
      height: 100px;
      border-radius: 5px;
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) inset;
    }
    
    .front {
      transform: rotateY(0deg) translateZ(50px);
      background: linear-gradient(to bottom right, #f3d655, #d5b634);
    }
    
    .back {
      transform: rotateX(180deg) translateZ(50px);
      background: linear-gradient(to bottom right, #f3d655, #d5b634);
    }
    
    .top {
      transform: rotateX(90deg) translateZ(50px);
      background: linear-gradient(to bottom right, #171717, #111);
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.2) inset !important;
    }
    
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
      background: linear-gradient(to bottom right, #171717, #111);
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.2) inset !important;
    }
    
    .left {
      transform: rotateY(-90deg) translateZ(50px);
      background: linear-gradient(to bottom right, #f3d655, #d5b634);
    }
    
    .right {
      transform: rotateY(90deg) translateZ(50px);
      background: linear-gradient(to bottom right, #f3d655, #d5b634);
    }
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    body,
    html {
      height: 100%;
    }
    
    body {
      background: #e6cb50;
      background: linear-gradient(to bottom right, #f7dc5b, #c1a015);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    @media (max-height: 600px) {
      .timerWrap {
        transform: scale(0.8);
      }
    }
    </style>
</head>

<body>

    <div class="timerWrap" id="cubes">
        <div class="row">
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>
        <div class="row">
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>
        <div class="row">
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="cube">
                <div class="front"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div cl.........完整代码请登录后点击上方下载按钮下载查看