Ok, so here is the javascript implementation. This is a complex javascript feature with lots of options and styling features, normally implemented by designers and developers ... I have created the code for you and tested it in X3. If you want to change STYLES or OPTIONS, you should read the documentation for options. I cannot do the job for you.
http://flipclockjs.com/
1. Go to Settings > Custom > Custom JS, and the following:
function apply_flipclock(flipclock){
var clock = flipclock.FlipClock({
// options
});
}
function x3_load_page(){
var flipclock = $('.flipclock');
if(flipclock.length){
if(typeof FlipClock === 'function'){
apply_flipclock(flipclock);
} else {
$('<link>').appendTo($('head')).attr({type : 'text/css', rel : 'stylesheet'}).attr('href', 'https://cdn.jsdelivr.net/npm/flipclock@0.8.2/dist/flipclock.css');
$.getScript('https://cdn.jsdelivr.net/npm/flipclock@0.8.2/dist/flipclock.min.js').done(function() {
apply_flipclock(flipclock);
});
}
}
}
2. For the page(s) where you want the clock to display, add some html:
<div class="flipclock"></div>
Voila.
I'm sure you want to style things and edit options. Check their documentation, I can't do more than this for free!