clock flipping (#611)

app/assets/stylesheets/application.css

@@ -127,16 +127,48 @@ select {
 	width: 100%;
 	height: 1.5em;
 	font-size: 15vmin;
+	margin: 2rem auto;
+	perspective: 1000px;
+	position: relative;
+}
 
+.clock-display-inner {
+	width: 100%;
+	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-
 	border: 12px solid var(--color-primary);
 	border-radius: 64px;
-
-	margin: 2rem auto;
+	transform-style: preserve-3d;
+	transition: transform 0.3s ease-in-out;
+	position: relative;
 }
+
+.clock-display:hover .clock-display-inner {
+	transform: rotateX(180deg);
+}
+
+.clock-display-front,
+.clock-display-back {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
+}
+
+.clock-display-front {
+	transform: rotateX(0deg);
+}
+
+.clock-display-back {
+	transform: rotateX(180deg);
+}
+
 .clock-display * {
 	line-height: normal;
 }

app/javascript/application.js

@@ -60,24 +60,38 @@ function weirdclockthing() {
 
   if (!clock) return;
 
-  function write(something) {
-    clock.innerHTML = '';
+  clock.innerHTML = '';
+
+  function write(element, something) {
+    element.innerHTML = '';
     Array.from(something).forEach((char) => {
       const span = document.createElement('span');
       span.textContent = char === ' ' ? '\u00A0' : char;
       if (char === ':') {
         span.classList.add('blink');
       }
-      clock.appendChild(span);
+      element.appendChild(span);
     });
   }
 
-  write("HAC:KA:TIME");
+  const inner = document.createElement('div');
+  inner.className = 'clock-display-inner';
+
+  const front = document.createElement('div');
+  front.className = 'clock-display-front';
+  write(front, "HAC:KA:TIME");
+
+  const back = document.createElement('div');
+  back.className = 'clock-display-back';
+
+  inner.appendChild(front);
+  inner.appendChild(back);
+  clock.appendChild(inner);
 
   function updateClock() {
     const date = new Date();
     const time = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
-    write(` ${time} `);
+    write(back, ` ${time} `);
   }
 
   let intervalId = null;
@@ -91,7 +105,6 @@ function weirdclockthing() {
   clock.onmouseleave = function () {
     clearInterval(intervalId);
     intervalId = null;
-    write("HAC:KA:TIME");
   }
 }