SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Bouncy Cards

Browse Source
This commit is contained in:
Chaoscaot
2024-02-25 10:03:47 +01:00
parent 7448a77bb1
commit 04859c6858
2 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Card.svelte
View File

@ -31,20 +31,20 @@
const centerX = boundingRect.left + boundingRect.width / 2;
const centerY = boundingRect.top + boundingRect.height / 2;
const rotateX = (centerY - y) / 10;
const rotateY = -(centerX - x) / 10;
const rotateX = (centerY - y) / 20;
const rotateY = -(centerX - x) / 20;
cardElement.style.setProperty('--tw-rotate-x', `${rotateX}deg`);
cardElement.style.setProperty('--tw-rotate-y', `${rotateY}deg`);
cardElement.style.setProperty('--rotate-x', `${rotateX}deg`);
cardElement.style.setProperty('--rotate-y', `${rotateY}deg`);
}
function resetElement() {
cardElement.style.setProperty('--tw-rotate-x', "0");
cardElement.style.setProperty('--tw-rotate-y', "0");
cardElement.style.setProperty('--rotate-x', "0");
cardElement.style.setProperty('--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)
$: 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 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}>
@ -53,8 +53,13 @@
<style lang="scss">
div {
transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
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;
transition: scale 300ms cubic-bezier(.2, 3, .67, .6);
&:hover {
scale: 105%;
}
:global(h1) {
@apply text-xl font-bold mt-4;