Scale Transform

Advanced

Custom transform that scales cards instead of rotating during swipe.

Demo

Source

index.vue

<script setup lang="ts">
import type { DragPosition } from 'vue3-flashcards'
import { ref } from 'vue'
import { FlashCards } from 'vue3-flashcards'
import ScaleCard from './ScaleCard.vue'

const cards = ref([
  { id: 1, title: 'Scale Transform', description: 'This card scales instead of rotating when swiped' },
  { id: 2, title: 'Custom Animation', description: 'Demonstrates transformStyle prop override' },
  { id: 3, title: 'No Rotation', description: 'Only scaling and translation applied' },
])

// Custom transform function that scales the card instead of rotating
function scaleTransform({ delta }: DragPosition) {
  const scale = 1 - (Math.abs(delta) * 0.2)
  return `transform: scale(${scale})`
}
</script>

<template>
  <div class="w-full flex justify-center items-center py-20">
    <div class="max-w-sm w-full">
      <FlashCards
        :items="cards"
        :transform-style="scaleTransform"
      >
        <template #default="{ item }">
          <ScaleCard :card="item" />
        </template>
      </FlashCards>
    </div>
  </div>
</template>

ScaleCard.vue

<script setup lang="ts">
interface Card {
  id: number
  title: string
  description: string
}

defineProps<{
  card: Card
}>()
</script>

<template>
  <div class="card bg-gradient-to-br from-primary to-secondary text-primary-content shadow-2xl h-80 relative overflow-hidden">
    <div class="card-body p-6">
      <div class="flex justify-between items-center mb-4">
        <h4 class="card-title text-2xl font-bold">
          {{ card.title }}
        </h4>
        <div class="badge badge-outline badge-lg">
          #{{ card.id }}
        </div>
      </div>

      <p class="text-primary-content/90 text-lg leading-relaxed flex-1">
        {{ card.description }}
      </p>

      <div class="card-actions justify-center mt-4">
        <span class="text-sm italic opacity-70">
          Swipe left or right
        </span>
      </div>
    </div>
  </div>
</template>

Key Concepts

• transformStyle: Custom transform function
• Override default rotation behavior
• Return transform string for card element
• Example: return 'scale(0.9)' instead of rotation

Related

• Custom Transforms