Update some stuff

html/scripts/CardTilter.js

@@ -15,8 +15,11 @@ export class CardTilter {
 
     watch(){
         this.card.addEventListener('mousemove', (e) => {
-            const rotations = this.calculatePositions(e.clientX, e.clientY);
-            this.transform(rotations.x, rotations.y);
+            const rect = this.card.getBoundingClientRect();
+            const positions = this.calculatePositions(rect, e.clientX, e.clientY);
+            const percentages = this.calculatePercentage(rect, positions.x, positions.y);
+
+            this.transform(percentages.x, percentages.y);
         });
 
         this.card.addEventListener('mouseleave', () => {
@@ -24,22 +27,28 @@ export class CardTilter {
         });
     }
 
-    calculatePositions(cursorX, cursorY) {
-        const rect = this.card.getBoundingClientRect();
+    calculatePositions(rect, cursorX, cursorY) {
         const x = cursorX - rect.left;
         const y = cursorY - rect.top;
-
-        const percentX = (x / rect.width) - 0.5;
-        const percentY = (y / rect.height) - 0.5;
-
-        const rotateX = -percentY * this.tilt;
-        const rotateY = percentX * this.tilt;
-
-        return {x : rotateX, y : rotateY};
+        return {x : x, y : y};
     };
 
-    transform(rotationX, rotationY) {
-        this.card.style.transform = `translateY(-5px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.02)`;
+    calculatePercentage(rect, cursorX, cursorY) {
+        const percentX = ((cursorX / rect.width) - 0.5).toFixed(2);
+        const percentY = ((cursorY / rect.height) - 0.5).toFixed(2);
+        return {x : percentX, y : percentY};
+    }
+
+    transform(percX, percY) {
+
+        const rotationX = -percY * this.tilt;
+        const rotationY = percX * this.tilt;
+
+        this.card.style.transform = `
+        perspective(${this.perspective}px) 
+        rotateX(${rotationX}deg) 
+        rotateY(${rotationY}deg) 
+        scale(1.02)`;
     }
 
     reset(){