Distinguish between hour and minute hands

emodo · emodo · commit e2c623fb0a05 · 2017-02-24T18:56:19.000+08:00
diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html
@@ -53,17 +53,18 @@
       position: relative;
       width: 100%;
       height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+      transform: translate(-3px, -3px); /* account for the height of the clock hands */
     }
 
     .hand {
       width:50%;
       height:6px;
       background:black;
       position: absolute;
-      top:50%;
-      transform-origin: 100%;
-      transform: rotate(90deg);
+      top: 50%;
+      left: 50%;
+      transform-origin: 0%;
+      transform: rotate(-90deg);
       transition: all 0.05s;
       transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
@@ -78,15 +79,15 @@
     const now = new Date();
 
     const seconds = now.getSeconds();
-    const secondsDegrees = ((seconds / 60) * 360) + 90;
+    const secondsDegrees = ((seconds / 60) * 360) - 90;
     secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
 
     const mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
+    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) - 90;
     minsHand.style.transform = `rotate(${minsDegrees}deg)`;
 
     const hour = now.getHours();
-    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
+    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) - 90;
     hourHand.style.transform = `rotate(${hourDegrees}deg)`;
   }
 
