Add 3D Card Effect

2024-02-21 23:59:14 +01:00
parent 568e8dbf7d
commit 7448a77bb1
2 changed files with 80 additions and 10 deletions
--- a/src/components/Card.svelte
+++ b/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>