Splitting: 3D Clock

index.html

<div class="clock">

  <span class="cog hours tens" data-splitting>0123456789</span>
  <span class="cog hours" data-splitting>0123456789</span>
  <span class="colon">:</span>
  <span class="cog minutes tens" data-splitting>0123456789</span>
  <span class="cog minutes" data-splitting>0123456789</span>
  <span class="colon">:</span>
  <span class="cog seconds tens" data-splitting>0123456789</span>
  <span class="cog seconds" data-splitting>0123456789</span>

</div>

script.js

console.clear();

Splitting();

var clock = document.querySelector('.clock');

/* We need zero-led values to help with the tens columns, and to allow for better looping around when reaching '9' */
function leadingZeroString(n){
  return ('0' + n).slice(-2); 
}

function updateTime(){
  var d = new Date();
  var h = leadingZeroString(d.getHours());
  var m = leadingZeroString(d.getMinutes());
  var s = leadingZeroString(d.getSeconds());
  
  clock.style.setProperty('--h1', h[0]);
  clock.style.setProperty('--h2', h);
  clock.style.setProperty('--m1', m[0]);
  clock.style.setProperty('--m2', m);
  clock.style.setProperty('--s1', s[0]);
  clock.style.setProperty('--s2', s); 
  
  //var t = new Date().toTimeString();
  // clock.style.setProperty('--h1', t[0]);
  // clock.style.setProperty('--h2', t[1]);
  // clock.style.setProperty('--m1', t[3]);
  // clock.style.setProperty('--m2', t[4]);
  // clock.style.setProperty('--s1', t[5]);
  // clock.style.setProperty('--s2', t[6]);
}

updateTime();
setInterval(updateTime, 1000);

scripts

<script src="https://unpkg.com/splitting@next/dist/splitting.js"></script>

splitting-3d-clock.markdown

Splitting: 3D Clock

https://splitting.js.org

A Pen by Shaw on CodePen.

License.

style.scss

$bg: #222;
$color: #F1F1F1;

html, body { background: $bg; }
html { height: 100%; display: flex; }
body { 
  margin: auto;
  width: 100%;
  overflow: hidden;
}

@import url('https://fonts.googleapis.com/css?family=Oswald:700');

.clock {
  --time-offset: 0;
  width: 100%;
  height: 100%;
  background: rgba($bg,0.8);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6em;

  color: $color;
  font-family: monospace;
  font-size: 8vw;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.1em;

  perspective: 600px;
  
  --h1: 1;
  --h2: 2;
  --m1: 3;
  --m2: 4;
  --s1: 5;
  --s2: 6;

  &,
  &:before, 
  *,{ 
    box-sizing: border-box;
    transform-style: preserve-3d; 
  }

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba($bg,.9) 20%, transparent calc(50% - .4ch), transparent calc(50% + .4ch), rgba($bg,.9) 80%);
    transform: translateZ(2.6em);
  }
}

.colon {
  display: inline-block;
  opacity: 0.8;
  transform: translateZ(2.5em);
  width: 1ch;
  margin: 0;
  text-align: center;
}

.cog {
  position: relative;
  width: 1ch;
  height: 1ch;
  margin: -.25ch .1ch 0;

  display: inline-block;
  
  // --unit: 2;
  
  transition: transform .3s cubic-bezier(.4, 0, .6, 1);
  transform: rotateX(
    calc( 
      -1turn * 
      (var(--unit) / var(--char-total))
    )
  ) ;

  .word,
  .char {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 1ch;
    height: 1ch;
  }

  .char {
    transform: 
      //translate(-50%, -50%)
      rotateX( calc( 4deg + (360deg * var(--char-percent) )) )
      //rotateX( calc( 165deg + (162deg * var(--distance-sine)) ) )
      translateZ( 2.5em ); 
    // translateZ( calc( 0.25em * var(--char-total) ) );

  }
}

.tens { text-align: right; }

.hours.tens   { --unit: var(--h1); }
.hours        { --unit: var(--h2); }
.minutes.tens { --unit: var(--m1); }
.minutes      { --unit: var(--m2); }
.seconds.tens { --unit: var(--s1); }
.seconds      { --unit: var(--s2); }

styles

<link href="https://lucid-northcutt-877344.netlify.com/dist/splitting.css" rel="stylesheet" />