时分秒三个部分结构功能完全一致，均有四块构成，上下各两块。
正面可见，背面不可见，同时需要调整翻转过程中的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.number
const nextTime = time.toString().padStart(2, "0");
//当前时间与下一时间进行比较，相同则不更新
if(nextTime === curTime){
return;
}
dom.querySelector('.card1').innerHTML = nextTime
dom.querySelector('.card2').innerHTML = nextTime
dom.querySelector('.card3').innerHTML = dom.dataset.number
dom.querySelector('.card4').innerHTML = dom.dataset.number
dom.dataset.number = nextTime
dom.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)
