Add hinge fixes from Big John:

http://cnanney.com/journal/code/css-flip-counter-revisited/#comment-1065437585

css/css-flip-counter.less

@@ -63,7 +63,6 @@
     // 1px not enough, unfortunately
     -webkit-text-stroke: 2px;
 
-    .perspective(@digitFlipPerspective);
     .box-shadow(1px 1px 5px 0px @shadowColor);
     .border-radius(5px);
 
@@ -124,9 +123,15 @@
       //.box-shadow(@shadows);
     }
 
+    .hinge-wrap {
+      z-index: 5;
+      position: relative;
+      overflow: visible;
+      .perspective(@digitFlipPerspective);
+    }
+
     .hinge {
       position: absolute;
-      z-index: 5;
 
       height: @digitHeight / 2;
       width: @digitWidth;

css/style.css

@@ -119,10 +119,6 @@ p.info {
   text-align: center;
   line-height: 0;
   -webkit-text-stroke: 2px;
-  -webkit-perspective: 300px;
-  -moz-perspective: 300px;
-  -ms-perspective: 300px;
-  perspective: 300px;
   -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
@@ -170,9 +166,17 @@ p.info {
   -moz-box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7);
   box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7);
 }
+.flip-counter.default .digit .hinge-wrap {
+  z-index: 5;
+  position: relative;
+  overflow: visible;
+  -webkit-perspective: 300px;
+  -moz-perspective: 300px;
+  -ms-perspective: 300px;
+  perspective: 300px;
+}
 .flip-counter.default .digit .hinge {
   position: absolute;
-  z-index: 5;
   height: 45px;
   width: 60px;
   -webkit-transform-style: preserve-3d;
@@ -234,10 +238,6 @@ p.info {
   text-align: center;
   line-height: 0;
   -webkit-text-stroke: 2px;
-  -webkit-perspective: 300px;
-  -moz-perspective: 300px;
-  -ms-perspective: 300px;
-  perspective: 300px;
   -webkit-box-shadow: 1px 1px 5px 0px rgba(232, 241, 255, 0.5);
   -moz-box-shadow: 1px 1px 5px 0px rgba(232, 241, 255, 0.5);
   box-shadow: 1px 1px 5px 0px rgba(232, 241, 255, 0.5);
@@ -285,9 +285,17 @@ p.info {
   -moz-box-shadow: 0px 5px 7px -4px rgba(232, 241, 255, 0.7);
   box-shadow: 0px 5px 7px -4px rgba(232, 241, 255, 0.7);
 }
+.flip-counter.light .digit .hinge-wrap {
+  z-index: 5;
+  position: relative;
+  overflow: visible;
+  -webkit-perspective: 300px;
+  -moz-perspective: 300px;
+  -ms-perspective: 300px;
+  perspective: 300px;
+}
 .flip-counter.light .digit .hinge {
   position: absolute;
-  z-index: 5;
   height: 45px;
   width: 60px;
   -webkit-transform-style: preserve-3d;
@@ -349,10 +357,6 @@ p.info {
   text-align: center;
   line-height: 0;
   -webkit-text-stroke: 2px;
-  -webkit-perspective: 300px;
-  -moz-perspective: 300px;
-  -ms-perspective: 300px;
-  perspective: 300px;
   -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
@@ -400,9 +404,17 @@ p.info {
   -moz-box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7);
   box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7);
 }
+.flip-counter.small .digit .hinge-wrap {
+  z-index: 5;
+  position: relative;
+  overflow: visible;
+  -webkit-perspective: 300px;
+  -moz-perspective: 300px;
+  -ms-perspective: 300px;
+  perspective: 300px;
+}
 .flip-counter.small .digit .hinge {
   position: absolute;
-  z-index: 5;
   height: 20px;
   width: 30px;
   -webkit-transform-style: preserve-3d;
@@ -464,10 +476,6 @@ p.info {
   text-align: center;
   line-height: 0;
   -webkit-text-stroke: 2px;
-  -webkit-perspective: 800px;
-  -moz-perspective: 800px;
-  -ms-perspective: 800px;
-  perspective: 800px;
   -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
@@ -515,9 +523,17 @@ p.info {
   -moz-box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.7);
   box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.7);
 }
+.flip-counter.huge .digit .hinge-wrap {
+  z-index: 5;
+  position: relative;
+  overflow: visible;
+  -webkit-perspective: 800px;
+  -moz-perspective: 800px;
+  -ms-perspective: 800px;
+  perspective: 800px;
+}
 .flip-counter.huge .digit .hinge {
   position: absolute;
-  z-index: 5;
   height: 100px;
   width: 140px;
   -webkit-transform-style: preserve-3d;

js/flipcounter.js

@@ -192,10 +192,10 @@ var flipCounter = function(d, options){
         '<div class="line"></div>'+
         '<span class="front">'+dNew+'</span>'+
         '<span class="back">'+dOld+'</span>'+
-        '<div class="hinge">'+
+        '<div class="hinge-wrap"><div class="hinge">'+
         '<span class="front">'+dOld+'</span>'+
         '<span class="back">'+dNew+'</span>'+
-        '</div>'+
+        '</div></div>'+
         '</li>';
       if (bit !== count && bit % 3 === 0){
         html += '<li class="digit-delimiter">,</li>';