时钟卡片翻转效果

效果图

HTML

 <div id="card-h" class="card-container flip">
    </div>
    <div id="card-m" class="card-container flip">
    </div>
    <div id="card-s" class="card-container flip">
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  background-color: #353535;
  padding-top: 100px;
  font-size: 4em;
  color: #333;
  text-align: center;
}
.card-container {
  position: relative;
  perspective: 500px;
  width: 100px;
  height: 100px;
  background-color: #d7d7d7;
}

.card-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(to bottom, #000, #000 1px, #fff 1px);
  z-index: 99;
}

.card {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  overflow: hidden;
}
.card1 {
  background: rgb(45, 160, 214, 0.3);
  line-height: 100px;
}
.card2 {
  top: 50%;
  line-height: 0;
  background: yellow;
  transform: rotateX(180deg);
  transform-origin: center top;
  backface-visibility: hidden;
  transition: 0.5s;
  z-index: 10;
}

.card-container:hover .card2 {
  transform: rotateX(0deg);
}

.card3 {
  background: #f1cd81;
  line-height: 100px;
  z-index: 10;
  transform-origin: center bottom;
  transition: 0.5s;
  backface-visibility: hidden;
}
.card-container:hover .card3 {
  transform: rotateX(-180deg);
}

.card4 {
  top: 50%;
  line-height: 0;
  background: yellow;
}

.flip .card2 {
  transform: rotateX(0deg);
}

.flip .card3 {
  transform: rotateX(-180deg);
}

JS

 const hour = document.querySelector('#card-h');
        const minute = document.querySelector('#card-m');
        const second = document.querySelector('#card-s');

        countDown();
        setInterval(countDown, 1000)
        function countDown ()
        {
            const time = new Date();
            const h = time.getHours().toString().padStart(2, '0');  // 时
            const m = time.getMinutes().toString().padStart(2, '0');  // 分
            const s = time.getSeconds().toString().padStart(2, '0');  // 秒
            flipCards(hour, h);
            flipCards(minute, m);
            flipCards(second, s);
        }
        function flipCards (dom, nextTime)
        {
            const curValue = dom.dataset.number;
            // 如果值时间相同 下面值不执行
            if (nextTime === curValue)
            {
                return;
            }
            // 动态时分秒
            dom.innerHTML = `
             <div class="card1 card">${nextTime}</div>
             <div class="card2 card">${nextTime}</div>
             <div class="card3 card">${curValue || nextTime}</div>
             <div class="card4 card">${curValue || nextTime}</div>
        `
            // 移除 flip 属性
            dom.classList.remove("flip");
            // 通过获取 dom.clientHeight 来触发浏览器的重绘，以便在设置完卡片内容后立即执行翻转效果。这是因为在修改了元素的内容后，浏览器需要重新计算元素的布局和样式，然后才能正确地执行翻转效果。通过获取dom.clientHeight，可以强制浏览器立即执行重绘，确保翻转效果能够顺利进行。
            dom.clientHeight;
            // 切换 flip 属性
            dom.classList.toggle("flip");
            // 重置自定义属性 dataset.number 值
            dom.dataset.number = nextTime;
        }