---
title: "3D Card"
description: "Interactive 3D card with perspective effects that respond to mouse movement."
canonical_url: "https://nuxt-motion-block.pages.dev/components/3d/3d-card"
---
# 3D Card

> Interactive 3D card with perspective effects that respond to mouse movement.

The 3D Card component creates an interactive card with 3D perspective effects that respond to mouse movement. It's perfect for creating engaging UI elements that add depth and interactivity to your application.

## Usage

<code-preview label="Preview">
<div className="flex,justify-center,w-full,h-full">
<component-example name="three-d-card-example">



</component-example>
</div>

<template v-slot:code="">

```vue
<template>
  <div class="flex justify-center">
    <M3DCard :intensity="25">
      <template #header>
        <M3DItem :translate-z="40">
          <h2 class="text-xl font-semibold">
            3D Card
          </h2>
        </M3DItem>
      </template>

      <M3DItem :translate-z="20">
        <p class="text-muted">
          This is a 3D card that responds to mouse movement.
        </p>
        <div class="mt-4">
          <UButton color="primary">
            Interact
          </UButton>
        </div>
      </M3DItem>
    </M3DCard>
  </div>
</template>
```

</template>
</code-preview>

## Examples

### Basic 3D Card

<code-preview label="Preview">
<div className="w-full">
<component-example name="three-d-card-basic">



</component-example>
</div>

<template v-slot:code="">

```vue
<template>
  <div class="flex justify-center">
    <M3DCard class="w-96">
      <template #header>
        <M3DItem :translate-z="40">
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-lg bg-primary/70 flex items-center justify-center mr-4">
              <UIcon
                name="i-lucide-cube"
                class="w-6 h-6 text-white"
              />
            </div>
            <h2 class="text-2xl font-bold">
              3D Card
            </h2>
          </div>
        </M3DItem>
      </template>

      <M3DItem
        :translate-z="20"
        class="space-y-6"
      >
        <p class="text-muted text-lg">
          Experience interactive 3D effects that respond to your cursor movements for an engaging user interface.
        </p>

        <div class="flex items-center p-5 bg-primary/5 dark:bg-primary/30 rounded-lg">
          <UIcon
            name="i-lucide-info"
            class="w-6 h-6 text-primary mr-4"
          />
          <span class="text-primary">Move your cursor over the card to see the 3D effect</span>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div class="p-4 bg-muted rounded-lg">
            <div class="text-sm text-muted">
              Rotation
            </div>
            <div class="font-bold text-highlighted">
              Interactive
            </div>
          </div>
          <div class="p-4 bg-muted rounded-lg">
            <div class="text-sm text-muted">
              Perspective
            </div>
            <div class="font-bold text-highlighted">
              Realistic
            </div>
          </div>
        </div>
      </M3DItem>

      <template #footer>
        <M3DItem
          :translate-z="30"
          class="flex justify-between pt-4"
        >
          <UButton
            color="neutral"
            variant="ghost"
            size="lg"
          >
            <UIcon
              name="i-lucide-heart"
              class="w-5 h-5 mr-2"
            />
            Like
          </UButton>
          <UButton
            color="primary"
            variant="solid"
            size="lg"
          >
            Get Started
          </UButton>
        </M3DItem>
      </template>
    </M3DCard>
  </div>
</template>
```

</template>
</code-preview>

### Customize

<code-preview label="Preview">
<div className="w-full">
<component-example name="three-d-card-custom">



</component-example>
</div>

<template v-slot:code="">
<playground-code name="3DCard">



</playground-code>
</template>
</code-preview>

## Props

### M3DCard Props

<component-props>
<component-prop default="25" name="intensity" type="number">

Controls the intensity of the 3D effect. Higher values result in more subtle movement.

</component-prop>

<component-prop default="''" name="class" type="string">

CSS classes to apply to the card container.

</component-prop>

<component-prop default="''" name="containerClass" type="string">

CSS classes to apply to the outer container.

</component-prop>

<component-prop default="{}" name="ui" type="object">

UI configuration for the underlying UCard component.

</component-prop>
</component-props>

### M3DItem Props

<component-props>
<component-prop default="'div'" name="as" type="string">

HTML element to render as.

</component-prop>

<component-prop default="''" name="class" type="string">

CSS classes to apply to the item.

</component-prop>

<component-prop default="0" name="translateX" type="number|string">

X-axis translation in pixels.

</component-prop>

<component-prop default="0" name="translateY" type="number|string">

Y-axis translation in pixels.

</component-prop>

<component-prop default="0" name="translateZ" type="number|string">

Z-axis translation in pixels.

</component-prop>

<component-prop default="0" name="rotateX" type="number|string">

X-axis rotation in degrees.

</component-prop>

<component-prop default="0" name="rotateY" type="number|string">

Y-axis rotation in degrees.

</component-prop>

<component-prop default="0" name="rotateZ" type="number|string">

Z-axis rotation in degrees.

</component-prop>
</component-props>


## Sitemap

See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.