@@ -61,13 +61,15 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
-  <script>
+  <script src="index.js"></script>
 
-
-  </script>
 </body>
 </html>
@@ -0,0 +1,27 @@
+const units = [
+  {
+    elem: document.querySelector('.second-hand'),
+    method: 'getSeconds',
+    max: 60
+  },
+  {
+    elem: document.querySelector('.min-hand'),
+    method: 'getMinutes',
+    max: 60
+  },
+  {
+    elem: document.querySelector('.hour-hand'),
+    method: 'getHours',
+    max: 12
+  }
+];
+
+setInterval(setDate, 1000);
+
+function setDate() {
+  units.forEach(unit => {
+    const now = new Date();
+    const deg = (now[unit.method]() / unit.max) * 360 + 90;
+    unit.elem.style.transform = `rotate(${deg}deg)`;
+  });
+}