纯CSS日期时间变化时出现翻转的3D立体动效

日期时间变化时出现翻转的3D立体动效

源码下载：https://gitee.com/tangying_cn/blog_file/blob/master/7-8.zip

HTML

 <div class="cont1">
    <img src="img/bg1.png" width='100%'>
    <div class="cont1-info">
      <div class="date"><img src="img/02.png"></div>
      <div class="date"><img src="img/0.png"></div>
      <div class="date"><img src="img/01.png"></div>
      <div class="date">
        <div id="stage-1" class="stage stage-state-default">
          <div class="stage-content">
            <ul class="stage-1-icon">
              <li class="stage-1-icon-1"><span class="stage-1-icon-top"></span> <span class="stage-1-icon-bottom"></span> </li>
              <li class="stage-1-icon-2"> <span class="stage-1-icon-top"></span> <span class="stage-1-icon-bottom"></span> </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS:

  body {
    max-width: 640px;
    margin: 0 auto;
    background: #FFF9F2;
  }

  @media (min-width: 320px) {
    html {
      font-size: 12px;
    }
  }

  @media (min-width: 360px) {
    html {
      font-size: 14px;
    }
  }

  .cont1 {
    position: relative;
  }

  .cont1-info {
    position: absolute;
    left: 0;
    top: 45%;
    width: 100%;
    text-align: center;
  }

  .date {
    display: inline-block;
    margin: 0;
    font-size: 0;
    width: 5.3rem;
    height: 8rem;
  }

  .date img {
    width: 100%;
    height: 100%;
  }

  #stage-1 .stage-content {
    width: 100%;
    height: 8rem;
  }
  .stage-1-icon {
    width: 100%;
    height: 8rem;
    position: relative;
    -webkit-perspective: 900px;perspective: 900px;
    padding: 0;
  }
  .stage-1-icon-1 {
    height: 8rem;
  }
  .stage-1-icon-top,
  .stage-1-icon-bottom {
    width: 100%;
    height: 4rem;
    position: absolute;
    left: 0;
    background-size: 5.3rem 8rem;
    background-repeat: no-repeat;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
  }

  .stage-1-icon-top {
    top: 0;
    background-position: center top;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom
  }

  .stage-1-icon-bottom {
    top: 4rem;
    background-position: center -4rem;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top
  }

  .stage-1-icon-1 .stage-1-icon-top,
  .stage-1-icon-1 .stage-1-icon-bottom {
    z-index: 2;
    background-image: url(img/07.png);
  }

  .stage-1-icon-2 .stage-1-icon-top,
  .stage-1-icon-2 .stage-1-icon-bottom {
    z-index: 1;
    background-image: url(img/08.png);
  }

  @-webkit-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @-ms-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @-o-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes fadeout {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-moz-keyframes fadeout {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-ms-keyframes fadeout {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-o-keyframes fadeout {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes fadeout {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @-webkit-keyframes flipover-top {
    0% {
      z-index: 8;
      -webkit-transform: rotateX(0);
    }
    50% {
      z-index: 8;
      -webkit-transform: rotateX(-90deg);
    }
    51% {
      z-index: 7;
      opacity: 1;
    }
    100% {
      z-index: 7;
      opacity: 0;
      -webkit-transform: rotateX(-180deg);
    }
  }

  @-moz-keyframes flipover-top {
    0% {
      z-index: 8;
      -moz-transform: rotateX(0);
    }
    50% {
      z-index: 8;
      -moz-transform: rotateX(-90deg);
    }
    51% {
      z-index: 7;
      opacity: 1;
    }
    100% {
      z-index: 7;
      opacity: 0;
      -moz-transform: rotateX(-180deg);
    }
  }

  @-ms-keyframes flipover-top {
    0% {
      z-index: 8;
      -ms-transform: rotateX(0);
    }
    50% {
      z-index: 8;
      -ms-transform: rotateX(-90deg);
    }
    51% {
      z-index: 7;
      opacity: 1;
    }
    100% {
      z-index: 7;
      opacity: 0;
      -ms-transform: rotateX(-180deg);
    }
  }

  @-o-keyframes flipover-top {
    0% {
      z-index: 8;
      -o-transform: rotateX(0);
    }
    50% {
      z-index: 8;
      -o-transform: rotateX(-90deg);
    }
    51% {
      z-index: 7;
      opacity: 1;
    }
    100% {
      z-index: 7;
      opacity: 0;
      -o-transform: rotateX(-180deg);
    }
  }

  @keyframes flipover-top {
    0% {
      z-index: 8;
      transform: rotateX(0);
    }
    50% {
      z-index: 8;
      transform: rotateX(-90deg);
    }
    51% {
      z-index: 7;
      opacity: 1;
    }
    100% {
      z-index: 7;
      opacity: 0;
      transform: rotateX(-180deg);
    }
  }

  @-webkit-keyframes flipover-bottom {
    0% {
      z-index: 7;
      -webkit-transform: rotateX(180deg);
    }
    50% {
      z-index: 7;
      -webkit-transform: rotateX(90deg);
    }
    51% {
      z-index: 8;
    }
    100% {
      z-index: 8;
      -webkit-transform: rotateX(0);
    }
  }

  @-moz-keyframes flipover-bottom {
    0% {
      z-index: 7;
      -moz-transform: rotateX(180deg);
    }
    50% {
      z-index: 7;
      -moz-transform: rotateX(90deg);
    }
    51% {
      z-index: 8;
    }
    100% {
      z-index: 8;
      -moz-transform: rotateX(0);
    }
  }

  @-ms-keyframes flipover-bottom {
    0% {
      z-index: 7;
      -ms-transform: rotateX(180deg);
    }
    50% {
      z-index: 7;
      -ms-transform: rotateX(90deg);
    }
    51% {
      z-index: 8;
    }
    100% {
      z-index: 8;
      -ms-transform: rotateX(0);
    }
  }

  @-o-keyframes flipover-bottom {
    0% {
      z-index: 7;
      -o-transform: rotateX(180deg);
    }
    50% {
      z-index: 7;
      -o-transform: rotateX(90deg);
    }
    51% {
      z-index: 8;
    }
    100% {
      z-index: 8;
      -o-transform: rotateX(0);
    }
  }

  @keyframes flipover-bottom {
    0% {
      z-index: 7;
      transform: rotateX(180deg);
    }
    50% {
      z-index: 7;
      transform: rotateX(90deg);
    }
    51% {
      z-index: 8;
    }
    100% {
      z-index: 8;
      transform: rotateX(0);
    }
  }

  #stage-1.stage-state-default .stage-1-icon-bottom {
    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
    -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
    -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
    -o-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
    transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0)
  }

  #stage-1.stage-state-default .stage-1-icon-1 .stage-1-icon-bottom {
    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    -o-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0)
  }

  #stage-1.stage-state-default .stage-1-icon-1 .stage-1-icon-bottom {
    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    -o-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
    transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0)
  }

  #stage-1.stage-state-default .stage-1-icon-1 .stage-1-icon-top {
    -webkit-animation: flipover-top 1s linear 1s normal forwards;
    -moz-animation: flipover-top 1s linear 1s normal forwards;
    -ms-animation: flipover-top 1s linear 1s normal forwards;
    -o-animation: flipover-top 1s linear 1s normal forwards;
    animation: flipover-top 1s linear 1s normal forwards
  }

  #stage-1.stage-state-default .stage-1-icon-2 .stage-1-icon-bottom {
    -webkit-animation: flipover-bottom 1s linear 1s normal forwards;
    -moz-animation: flipover-bottom 1s linear 1s normal forwards;
    -ms-animation: flipover-bottom 1s linear 1s normal forwards;
    -o-animation: flipover-bottom 1s linear 1s normal forwards;
    animation: flipover-bottom 1s linear 1s normal forwards
  }

我的个人博客,有空来坐坐