抄的动态计时

            
            *, *:after,*:before{
      box-sizing:border-box;
    }
$boxSize:64px;

body{
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
  background:#FF5722;
}

@function rotation($inc) {
  $rotate: -90;
  @return translate3d(0, 0, 0) rotate3d(1, 0, 0, #{$rotate * $inc}deg);
}


@mixin counter($animationName, $zero, $one, $two, $three,$four, $five,$six,$seven,$eight,$nine ){
  $transform: translate3d(0, 0, 0); 
  animation : $animationName 10s linear infinite;
  @keyframes #{$animationName} { 
    0% { transform: rotation($zero)}
    5% , 10% { transform: rotation($zero)}
    15% , 20% { transform: rotation($one)}
    25% , 30% { transform: rotation($two)}
    35% , 40% { transform: rotation($three)}
    45% , 50% { transform: rotation($four)}
    55% , 60% { transform: rotation($five)}
    65% , 70% { transform: rotation($six)}
    75% , 80% { transform: rotation($seven)}
    85% , 90% { transform: rotation($eight)}
    95% , 100% { transform: rotation($nine)}
  }  
}




.container{
  position: relative;
  perspective: $boxSize * 75;
  justify-content: center;
  display: grid;
  gap: 4px;
  grid-template-columns: $boxSize  $boxSize $boxSize;
  filter: drop-shadow(0 $boxSize/6 $boxSize/10 #0007)
}

.box{
  width: $boxSize;
  height: $boxSize;
  position: relative;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  &:nth-child(1){
    @include counter(an1,1,2,3,3,3,3,3,3,3,3);
  }  
  &:nth-child(2){
    @include counter(an2,1,1,1,1,2,3,3,3,3,3);
  }  
  &:nth-child(3){
    @include counter(an3,1,2,3,3,4,5,5,5,5,5);
  }
  &:nth-child(4){
    @include counter(an4,1,2,2,2,3,3,3,4,5,5);
  }
  &:nth-child(5){
    @include counter(an5,0,1,2,2,2,2,2,2,2,2);
  }
  &:nth-child(6){
    @include counter(an6,1,2,3,3,3,4,4,5,5,5);
  }
  &:nth-child(7){
    @include counter(an7,1,2,3,4,5,5,5,6,7,7);
  }
  &:nth-child(8){
    @include counter(an8,0,1,3,3,3,3,3,4,5,5);
  }
  &:nth-child(9){
    @include counter(an9,1,2,3,3,3,3,3,3,3,3);
  }
  &:nth-child(10){
    @include counter(an10,1,2,3,4,4,4,5,6,7,8);
  }
  &:nth-child(11){
    @include counter(an11,0,1,2,2,2,2,2,2,2,2);
  }
  &:nth-child(12){
    @include counter(an12,1,2,2,3,3,3,3,3,3,3);
  }
  &:nth-child(13){
    @include counter(an13,1,2,3,3,4,5,5,6,7,8);
  }  
  &:nth-child(14){
    @include counter(an14,1,1,1,1,2,3,3,4,5,6);
  }  
  &:nth-child(15){
    @include counter(an15, 1,2,3,3,3,3,3,3,3,3);
  }
  
  
  > div{
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0 0 $boxSize/4 #0003, 0 0 3px #0002;
    border-radius: 4px;
  }
  .front {
    background: #FF5724;
    z-index: 2;
    transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxSize/2);
  }
  .back {
    background: #FF5724;
    transform: rotate3d(0, 1, 0, 180deg) rotate(180deg) translate3d(0, 0, $boxSize/2);
  }
  .top {
    background:#FFD600;
    height: $boxSize;
    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxSize/2);
  }
  .bottom {
    background: #FFD600;
    height: $boxSize;
    transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxSize/2);
  }
}