样式调整

linyisonger · Sep 29, 2024 · d75d0b0 · d75d0b0
1 parent d41ba9d
commit d75d0b0
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/077.3D卡片旋转动效-鼠标跟随.html → 077.3D卡片鼠标跟随旋转动效.html b/077.3D卡片旋转动效-鼠标跟随.html → 077.3D卡片鼠标跟随旋转动效.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>