Flipclock countdown

CSS

.flip-clock {
text-align: center;
perspective: 400px;
margin: 20px auto;
}
.flip-clock *,
.flip-clock *:before,
.flip-clock *:after {
box-sizing: border-box;
}
.flip-clock__piece {
display: inline-block;
margin: 0 5px;
}
.flip-clock__slot {
font-size: 2vw;
}
.flip-clock .card {
display: block;
position: relative;
padding-bottom: 0.72em;
font-size: 9vw;
line-height: 0.95;
}
.flip-clock .card__top,
.flip-clock .card__bottom,
.flip-clock .card__back::before,
.flip-clock .card__back::after {
display: block;
height: 0.72em;
color: #ccc;
background: #222;
padding: 0.25em 0.25em;
border-radius: 0.15em 0.15em 0 0;
backface-visiblity: hidden;
transform-style: preserve-3d;
width: 1.8em;
transform: translateZ(0);
}
.flip-clock .card__bottom {
color: #FFF;
position: absolute;
top: 50%;
left: 0;
border-top: solid 1px #000;
background: #393939;
border-radius: 0 0 0.15em 0.15em;
pointer-events: none;
overflow: hidden;
}
.flip-clock .card__bottom::after {
display: block;
margin-top: -0.72em;
}
.flip-clock .card__back::before,
.flip-clock .card__bottom::after {
content: attr(data-value);
}
.flip-clock .card__back {
position: absolute;
top: 0;
height: 100%;
left: 0%;
pointer-events: none;
}
.flip-clock .card__back::before {
position: relative;
z-index: -1;
overflow: hidden;
}
.flip-clock .flip .card__back::before {
-webkit-animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transform-origin: center bottom;
}
.flip-clock .flip .card__back .card__bottom {
transform-origin: center top;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
}
@-webkit-keyframes flipTop {
0% {
transform: rotateX(0deg);
z-index: 2;
}
0%,
99% {
opacity: 0.99;
}
100% {
transform: rotateX(-90deg);
opacity: 0;
}
}
@keyframes flipTop {
0% {
transform: rotateX(0deg);
z-index: 2;
}
0%,
99% {
opacity: 0.99;
}
100% {
transform: rotateX(-90deg);
opacity: 0;
}
}
@-webkit-keyframes flipBottom {
0%,
50% {
z-index: -1;
transform: rotateX(90deg);
opacity: 0;
}
51% {
opacity: 0.99;
}
100% {
opacity: 0.99;
transform: rotateX(0deg);
z-index: 5;
}
}
@keyframes flipBottom {
0%,
50% {
z-index: -1;
transform: rotateX(90deg);
opacity: 0;
}
51% {
opacity: 0.99;
}
100% {
opacity: 0.99;
transform: rotateX(0deg);
z-index: 5;
}
}
@media (min-width:1440px) {
.flip-clock {
max-width: 992px;
}
.flip-clock .card {
font-size: 90px;
}
.flip-clock__slot {
font-size: 30px;
}
}

-------------------

Script

<script>
console.clear();

function CountdownTracker(label, value){
var el = document.createElement('span');
el.className = 'flip-clock__piece';
el.innerHTML = '<b class="flip-clock__card card"><b class="card__top"></b><b class="card__bottom"></b><b class="card__back"><b class="card__bottom"></b></b></b>' +
'<span class="flip-clock__slot">' + label + '</span>';

this.el = el;

var top = el.querySelector('.card__top'),
bottom = el.querySelector('.card__bottom'),
back = el.querySelector('.card__back'),
backBottom = el.querySelector('.card__back .card__bottom');

this.update = function(val){
val = ('0' + val).slice(-2);
if (val !== this.currentValue) {
if (this.currentValue >= 0) {
back.setAttribute('data-value', this.currentValue);
bottom.setAttribute('data-value', this.currentValue);
}
this.currentValue = val;
top.innerText = this.currentValue;
backBottom.setAttribute('data-value', this.currentValue);

this.el.classList.remove('flip');
void this.el.offsetWidth;
this.el.classList.add('flip');
}
}

this.update(value);
}

function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
return {
'Total': t,
'Days': Math.floor(t / (1000 * 60 * 60 * 24)),
'Hours': Math.floor((t / (1000 * 60 * 60)) % 24),
'Minutes': Math.floor((t / 1000 / 60) % 60),
'Seconds': Math.floor((t / 1000) % 60)
};
}

function getTime() {
var t = new Date();
return {
'Total': t,
'Hours': t.getHours() % 12,
'Minutes': t.getMinutes(),
'Seconds': t.getSeconds()
};
}

function Clock(countdown, callback) {
countdown = countdown ? new Date(Date.parse(countdown)) : false;
callback = callback || function(){};

var updateFn = countdown ? getTimeRemaining : getTime;

this.el = document.createElement('div');
this.el.className = 'flip-clock';

var trackers = {},
t = updateFn(countdown),
key, timeinterval;

for (key in t){
if (key === 'Total') { continue; }
trackers[key] = new CountdownTracker(key, t[key]);
this.el.appendChild(trackers[key].el);
}

var i = 0;
function updateClock() {
timeinterval = requestAnimationFrame(updateClock);
if (i++ % 10) { return; }

var t = updateFn(countdown);
if (t.Total < 0) {
cancelAnimationFrame(timeinterval);
for (key in trackers){
trackers[key].update(0);
}
callback();
return;
}
for (key in trackers){
trackers[key].update(t[key]);
}
}

setTimeout(updateClock, 500);
}

document.addEventListener("DOMContentLoaded", function() {
var container = document.getElementById("countdown");
if (container) {
var deadline = new Date("2025-10-05T22:59:59+01:00");
var c = new Clock(deadline, function(){ alert('countdown complete') });
container.appendChild(c.el);
}
});
</script>