CSS數字循環翻牌是一種在網頁中實現數字變化的方法，通過不斷切換數字容器的位置來實現翻牌的效果。

html:
<div class="flip-wrap">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front"></div>
<div class="flip-card-back"><p>1</p></div>
</div>
</div>
</div>
css:
.flip-wrap{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.flip-card{
perspective: 1000px;
width: 100px;
height: 120px;
position: relative;
transform-style: preserve-3d;
}
.flip-card-inner{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform .5s;
}
.flip-card-front, .flip-card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front{
background-color: #f8f8f8;
}
.flip-card-back{
background-color: #8e44ad;
padding: 10px;
color: #FFF;
transform: rotateY(180deg);
text-align: center;
}
.flip-card-back p{
font-size: 80px;
margin: 0;
}
.flip-card.flipped .flip-card-inner{
transform: rotateY(180deg);
}

以上是實現CSS數字循環翻牌的代碼。其中通過設置一個外層容器，再在容器內部創建一個翻牌容器。翻牌容器分為內部容器和外部容器，通過CSS3的3D變換，將兩個容器分別放置于內部和外部。通過控制內部容器的位置實現翻牌效果。最后通過JavaScript控制數字的變化，將數字寫入到翻牌容器的后面，使用CSS樣式文字樣式設置。