.flip-digit-container { position: relative; border-radius: 4px; background-color: #1a1a1a; overflow: hidden; perspective: 1000px; } .flip-digit-bg-top { position: absolute; top: 0; left: 0; right: 0; background-color: #1a1a1a; overflow: hidden; display: flex; align-items: center; justify-content: center; border-top-left-radius: 4px; border-top-right-radius: 4px; z-index: 0; } .flip-digit-bg-bottom { position: absolute; bottom: 0; left: 0; right: 0; background-color: #1a1a1a; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 0; } .flip-digit-text { font-family: 'DSEG7', 'Courier New', monospace; color: #f0f0f0; text-align: center; line-height: 1; } .flip-digit-top-text { position: absolute; bottom: 0; left: 0; right: 0; } .flip-digit-bottom-text { position: absolute; top: 0; left: 0; right: 0; } .flip-digit-flip-top { position: absolute; top: 0; left: 0; right: 0; background-color: #1a1a1a; overflow: hidden; display: flex; align-items: center; justify-content: center; border-top-left-radius: 4px; border-top-right-radius: 4px; backface-visibility: hidden; z-index: 11; /* 旋转轴在底部边缘(卡片中线位置) */ transform-origin: center bottom; } .flip-digit-flip-bottom { position: absolute; bottom: 0; left: 0; right: 0; background-color: #1a1a1a; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; backface-visibility: hidden; z-index: 10; /* 旋转轴在顶部边缘(卡片中线位置) */ transform-origin: center top; } .flip-digit-center-line { position: absolute; left: 0; right: 0; height: 1px; background-color: rgba(0, 0, 0, 0.5); z-index: 20; }