时分秒三个部分结构功能完全一致，均有四块构成，上下各两块。
正面可见，背面不可见，同时需要调整翻转过程中的z-index。
初始状态card2为已经翻转状态。
calendar.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./calendar.css">
</head><body><div class="calendar"><div class="card-container hour" data-number="00"><div class="card card1">00</div><div class="card card2">00</div><div class="card card3">00</div><div class="card card4">00</div></div><div class="a">:</div><div class="card-container minute" data-number="00"><div class="card card1">00</div><div class="card card2">00</div><div class="card card3">00</div><div class="card card4">00</div></div><div class="a">:</div><div class="card-container seconds" data-number="00"><div class="card card1">00</div><div class="card card2">00</div><div class="card card3">00</div><div class="card card4">00</div></div></div><script src="./calendar.js"></script>
</body></html>
calendar.css
*{margin: 0;padding: 0;
}body{background: #868383e6;
}
.calendar{margin: 100px auto;width: 400px;display: flex; font-size: 80px; /* 文本大小 */}
.a{margin-top: 90px;
}.card-container{ position: relative;width: 100px;height: 100px;margin: 100px auto;text-align: center;background: #868383e6;perspective: 100px;/* transform-style: preserve-3d; */color:#fff;border-radius: 10px;box-shadow: 006px rgba(0, 0, 0, .5);
}.card-container::before {content: '';position: absolute;bottom: 50%;left: 0;right: 0;height: 2px;background-color: #868383e6;z-index: 99;}.card{position: absolute;width: 100%;height: 50%;left: 0;top: 0;line-height: 100px;overflow: hidden;background: #000;z-index: 10;border-radius: 10px;}.card2{top: 50%;line-height: 0;background: #000;transform: rotateX(180deg);transform-origin: center top;backface-visibility: hidden;}.flip.card2{transform: rotateX(0deg);transform-origin: center bottom;backface-visibility: hidden; //背面不可见transition: 0.5s;z-index: 12;background: #000;}.card3{top: 0%;line-height: 100px;background: #000;}.flip.card3{transition: 0.5s;transform: rotateX(-180deg);transform-origin: center bottom;backface-visibility: hidden;z-index: 13;background: #000;}.card4{top: 50%;line-height: 0;background: #000;z-index: 10;}calender.js
const doms = {hour:document.querySelector('.hour'),minute:document.querySelector('.minute'),seconds:document.querySelector('.seconds'),
}function processTime(dom,time){const curTime = dom.dataset.numberconst nextTime = time.toString().padStart(2, "0");//当前时间与下一时间进行比较，相同则不更新if(nextTime === curTime){return;}dom.querySelector('.card1').innerHTML = nextTimedom.querySelector('.card2').innerHTML = nextTimedom.querySelector('.card3').innerHTML = dom.dataset.numberdom.querySelector('.card4').innerHTML = dom.dataset.numberdom.dataset.number = nextTimedom.querySelector('.card2').classList.remove("flip");dom.querySelector('.card3').classList.remove("flip");dom.querySelector('.card2').clientHeight;dom.querySelector('.card2').classList.add("flip");dom.querySelector('.card3').classList.add("flip");
}setInterval(function () {processTime(doms.hour,new Date().getHours());processTime(doms.minute,new Date().getMinutes())processTime(doms.seconds,new Date().getSeconds())
}, 1000)
