From 592cea5bd7f6e06bbd416623f44f1089311b6e24 Mon Sep 17 00:00:00 2001
From: linyisonger <linyisonger@qq.com>
Date: Sun, 29 Sep 2024 15:42:56 +0800
Subject: [PATCH] resolve #6

---
 ...\346\240\207\350\267\237\351\232\217.html" | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 "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"
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\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"
new file mode 100644
index 0000000..482bb0a
--- /dev/null
+++ "b/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"
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./assets/global.css" />
+
+    <style>
+      .card {
+        position: relative;
+        top: 100px;
+        margin: 0 auto;
+        width: 300px;
+        height: 416px;
+
+        transform-style: preserve-3d;
+        perspective: 800px;
+        transform: rotateX(0) rotateY(0) rotateZ(20deg);
+      }
+
+      .card-content {
+        overflow: hidden;
+        border-radius: 12px;
+        display: flex;
+        box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
+        transition: all 0.5s;
+      }
+
+      .card-content img {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="card">
+      <div class="card-content">
+        <img src="./assets/movie-poster/m-gnh.jpg" />
+      </div>
+    </div>
+    <script type="module">
+      // 初始偏移
+      const initOffsetRotateX = 10;
+      const initOffsetRotateY = -10;
+      const cardContentDom = document.querySelector(".card-content");
+      // 初始化
+      requestAnimationFrame(function () {
+        cardContentDom.style.transform = `rotateX(${initOffsetRotateX}) rotateY(${initOffsetRotateY})`;
+      });
+      // 偏移
+      cardContentDom.addEventListener("mousemove", (e) => {
+        requestAnimationFrame(function () {
+          let rect = cardContentDom.getBoundingClientRect();
+          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;
+
+          // 给偏移值加上初始偏移
+          rotateX += initOffsetRotateX;
+          rotateY += initOffsetRotateY;
+
+          cardContentDom.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+      });
+      // 复位
+      cardContentDom.addEventListener("mouseleave", (e) => {
+        window.requestAnimationFrame(function () {
+          cardContentDom.style.transform = `rotateX(${initOffsetRotateX}) rotateY(${initOffsetRotateY})`;
+        });
+      });
+    </script>
+  </body>
+</html>
