From d75d0b09e1fbd11abf2a24e9b2c67aac216212ba Mon Sep 17 00:00:00 2001
From: linyisonger <linyisonger@qq.com>
Date: Sun, 29 Sep 2024 16:12:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\350\275\254\345\212\250\346\225\210.html" | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)
 rename "077.3D\345\215\241\347\211\207\346\227\213\350\275\254\345\212\250\346\225\210-\351\274\240\346\240\207\350\267\237\351\232\217.html" => "077.3D\345\215\241\347\211\207\351\274\240\346\240\207\350\267\237\351\232\217\346\227\213\350\275\254\345\212\250\346\225\210.html" (72%)
diff --git "a/077.3D\345\215\241\347\211\207\346\227\213\350\275\254\345\212\250\346\225\210-\351\274\240\346\240\207\350\267\237\351\232\217.html" "b/077.3D\345\215\241\347\211\207\351\274\240\346\240\207\350\267\237\351\232\217\346\227\213\350\275\254\345\212\250\346\225\210.html"
similarity index 72%
rename from "077.3D\345\215\241\347\211\207\346\227\213\350\275\254\345\212\250\346\225\210-\351\274\240\346\240\207\350\267\237\351\232\217.html"
rename to "077.3D\345\215\241\347\211\207\351\274\240\346\240\207\350\267\237\351\232\217\346\227\213\350\275\254\345\212\250\346\225\210.html"
index ebb3b9a..89a7d1c 100644
--- "a/077.3D\345\215\241\347\211\207\346\227\213\350\275\254\345\212\250\346\225\210-\351\274\240\346\240\207\350\267\237\351\232\217.html"
+++ "b/077.3D\345\215\241\347\211\207\351\274\240\346\240\207\350\267\237\351\232\217\346\227\213\350\275\254\345\212\250\346\225\210.html"
@@ -7,12 +7,15 @@
     <link rel="stylesheet" href="./assets/global.css" />
 
     <style>
+      body {
+        overflow: hidden;
+      }
       .card {
         position: relative;
         top: 100px;
-        margin: 0 auto;
-        width: 300px;
-        height: 416px;
+        left: calc(100vw - 600px);
+        width: 600px;
+        height: 832px;
 
         transform-style: preserve-3d;
         perspective: 800px;
@@ -31,10 +34,25 @@
         width: 100%;
         height: 100%;
       }
+
+      h1 {
+        pointer-events: none;
+        font-size: 80px;
+        position: absolute;
+        color: rgb(168, 20, 20);
+        -webkit-text-stroke: 2px goldenrod;
+        z-index: 1;
+        padding-left: 2em;
+        transform: translateX(-50%);
+        top: 200px;
+        left: 50%;
+        width: 100%;
+      }
     </style>
   </head>
 
   <body>
+    <h1>3D卡片鼠标跟随旋转动效</h1>
     <div class="card">
       <div class="card-content">
         <img src="./assets/movie-poster/m-gnh.jpg" />
@@ -43,11 +61,11 @@
     <script type="module">
       // 初始偏移
       const initOffsetRotateX = 10;
-      const initOffsetRotateY = -10;
+      const initOffsetRotateY = -20;
       const cardContentDom = document.querySelector(".card-content");
       // 初始化
       requestAnimationFrame(function () {
-        cardContentDom.style.transform = `rotateX(${initOffsetRotateX}) rotateY(${initOffsetRotateY})`;
+        cardContentDom.style.transform = `rotateX(${initOffsetRotateX}deg) rotateY(${initOffsetRotateY}deg)`;
       });
       // 偏移
       cardContentDom.addEventListener("mousemove", (e) => {
@@ -56,8 +74,8 @@
           let x = e.clientX;
           let y = e.clientY;
           // 鼠标位置 - 卡片中心点 / 偏移量
-          let rotateX = (y - rect.y - rect.height / 2) / 20;
-          let rotateY = ((x - rect.x - rect.width / 2) / 10) * -1;
+          let rotateX = (y - rect.y - rect.height / 2) / 60;
+          let rotateY = ((x - rect.x - rect.width / 2) / 60) * -1;
 
           // 给偏移值加上初始偏移
           rotateX += initOffsetRotateX;
@@ -69,7 +87,7 @@
       // 复位
       cardContentDom.addEventListener("mouseleave", (e) => {
         window.requestAnimationFrame(function () {
-          cardContentDom.style.transform = `rotateX(${initOffsetRotateX}) rotateY(${initOffsetRotateY})`;
+          cardContentDom.style.transform = `rotateX(${initOffsetRotateX}deg) rotateY(${initOffsetRotateY}deg)`;
         });
       });
     </script>
