Add 3D Card Effect

src/components/Card.svelte

@@ -0,0 +1,71 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {twMerge} from "tailwind-merge";
+    import {onMount} from "svelte";
+
+    let cardElement: HTMLDivElement;
+
+    function rotateElement(event: MouseEvent) {
+        const x = event.clientX;
+        const y = event.clientY;
+
+        const boundingRect = cardElement.getBoundingClientRect();
+        const centerX = boundingRect.left + boundingRect.width / 2;
+        const centerY = boundingRect.top + boundingRect.height / 2;
+
+        const rotateX = (centerY - y) / 10;
+        const rotateY = -(centerX - x) / 10;
+
+        cardElement.style.setProperty('--tw-rotate-x', `${rotateX}deg`);
+        cardElement.style.setProperty('--tw-rotate-y', `${rotateY}deg`);
+    }
+
+    function resetElement() {
+        cardElement.style.setProperty('--tw-rotate-x', "0");
+        cardElement.style.setProperty('--tw-rotate-y', "0");
+    }
+
+    export let extraClasses: string = '';
+    $: classes = twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg scale-100 transition-transform duration-300 ease-in-out hover:scale-105 dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)
+</script>
+
+<div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement}>
+    <slot></slot>
+</div>
+
+<style lang="scss">
+    div {
+
+      transform: perspective(1000px) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+
+      :global(h1) {
+        @apply text-xl font-bold mt-4;
+      }
+
+      :global(p) {
+        @apply mt-4;
+      }
+
+      :global(svg) {
+        @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
+      }
+    }
+</style>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import NavbarLayout from "@layouts/NavbarLayout.astro";
 
 import {Image} from "astro:assets";
+import Card from "@components/Card.svelte";
 import localBau from "@images/2023-10-08_20.43.43.png";
 import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
 import {t} from "astro-i18n";
@@ -113,23 +114,23 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
     </div>
     <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
         <div class="py-10 flex flex-col lg:flex-row">
-            <div class="card">
+            <Card>
                 <Archive heigth="64" width="64"/>
                 <h1>{t("home.benefits.historic.title")}</h1>
                 <p>{t("home.benefits.historic.description.1")}</p>
                 <p>{t("home.benefits.historic.description.2")}</p>
-            </div>
+            </Card>
-            <div class="card">
+            <Card>
                 <Rocket heigth="64" width="64"/>
                 <h1>{t("home.benefits.server.title")}</h1>
                 <p>{t("home.benefits.server.description")}</p>
-            </div>
+            </Card>
-            <div class="card">
+            <Card>
                 <Bell heigth="64" width="64"/>
                 <h1>{t("home.benefits.events.title")}</h1>
                 <p>{t("home.benefits.events.description.1")}</p>
                 <p>{t("home.benefits.events.description.2")}</p>
-            </div>
+            </Card>
         </div>
         <a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}
             <CaretRight width="24" heigth="24"/>
@@ -141,16 +142,14 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
                 <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
                 <div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
                     {value.map(v => (
-                        <div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
+                        <Card extraClasses="py-24 px-12" client:idle>
-									hover:scale-105 hover:shadow-2xl
-									dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
                             <figure class="flex flex-col items-center">
                                 <figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
                                 <Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
                                     class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl"
                                     alt={v.name + "s bust"} width="150" height="150"/>
                             </figure>
-                        </div>
+                        </Card>
                     ))}
                 </div>
             </div>