CSS實(shí)現(xiàn)數(shù)字翻牌效果，主要利用CSS3的3D特效以及過(guò)渡效果來(lái)實(shí)現(xiàn)動(dòng)畫效果。

.flip-container {
perspective: 1000px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg);
}
.flipper.flip .front {
transform: rotateY(180deg);
}
.flipper.flip .back {
transform: rotateY(0deg);
}

以上是CSS代碼部分，需要注意的是需要在HTML中添加對(duì)應(yīng)的class名稱。

HTML代碼部分如下：

<div class="flip-container">
<div class="flipper">
<div class="front">1</div>
<div class="back">2</div>
</div>
</div>

以上是實(shí)現(xiàn)數(shù)字翻牌效果的CSS代碼及HTML代碼。其中flip-container是設(shè)置3D特效的，flipper是翻牌動(dòng)畫區(qū)域，front是正面，back是背面。通過(guò)JS控制翻牌類名的添加和移除來(lái)達(dá)到動(dòng)態(tài)切換的效果。