title: 3D文字
description: A stylish 3D text component with customizable colors, shadows, and animation options.
---

```vue
<template>
  <div
    class="flex flex-col items-center justify-center overflow-hidden bg-black px-4 py-16 font-heading"
  >
    <Text3d
      class="text-8xl font-bold max-md:text-7xl"
      shadow-color="red"
    >
      3D
    </Text3d>
    <Text3d
      class="text-8xl font-black max-md:text-7xl"
      shadow-color="skyblue"
      :animate="false"
    >
      IS
    </Text3d>
    <Text3d class="text-8xl font-bold max-md:text-7xl">AWESOME</Text3d>
  </div>
</template>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="text-3d" />
```

## 手动安装

复制并粘贴以下代码：

```vue
<template>
  <div
    :class="
      cn('text-3d flex items-center justify-center', animate ? 'animate-text-3d' : '', props.class)
    "
  >
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { computed, type HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";

interface Props {
  textColor?: string;
  letterSpacing?: number;
  strokeColor?: string;
  shadowColor?: string;
  strokeSize?: number;
  shadow1Size?: number;
  shadow2Size?: number;
  class?: HTMLAttributes["class"];
  animate?: boolean;
  animationDuration?: number;
}

const props = withDefaults(defineProps<Props>(), {
  textColor: "white",
  letterSpacing: -0.1,
  strokeColor: "black",
  shadowColor: "yellow",
  strokeSize: 20,
  shadow1Size: 7,
  shadow2Size: 10,
  animate: true,
  animationDuration: 1500,
});

const letterSpacingInCh = computed(() => {
  return `${props.letterSpacing}ch`;
});

const strokeSizeInPx = computed(() => {
  return `${props.strokeSize}px`;
});

const shadow1SizeInPx = computed(() => {
  return `${props.shadow1Size}px`;
});

const shadow2SizeInPx = computed(() => {
  return `${props.shadow2Size}px`;
});

const animationDurationInMs = computed(() => {
  return `${props.animationDuration}ms`;
});
</script>

<style scoped>
.text-3d {
  paint-order: stroke fill;
  letter-spacing: v-bind(letterSpacingInCh);
  -webkit-text-stroke: v-bind(strokeSizeInPx) v-bind(strokeColor);
  text-shadow:
    v-bind(shadow1SizeInPx) v-bind(shadow1SizeInPx) 0px v-bind(strokeColor),
    v-bind(shadow2SizeInPx) v-bind(shadow2SizeInPx) 0px v-bind(shadowColor);
  color: v-bind(textColor);
}

.animate-text-3d {
  animation: wiggle v-bind(animationDurationInMs) ease-in-out infinite alternate;
  animation-timing-function: ease-in-out;
  transform-origin: center;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  38% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>

```

## API

| Prop 名称           | 类型      | 默认值     | 描述                                               |
| ------------------- | --------- | ---------- | -------------------------------------------------- |
| `textColor`         | `string`  | `"white"`  | Color of the main text.                            |
| `letterSpacing`     | `number`  | `-0.1`     | Adjusts the spacing between letters in `ch` units. |
| `strokeColor`       | `string`  | `"black"`  | Color of the text stroke.                          |
| `shadowColor`       | `string`  | `"yellow"` | Color of the text shadow.                          |
| `strokeSize`        | `number`  | `20`       | Thickness of the text stroke in pixels.            |
| `shadow1Size`       | `number`  | `7`        | Size of the first shadow layer in pixels.          |
| `shadow2Size`       | `number`  | `10`       | Size of the second shadow layer in pixels.         |
| `class`             | `string`  | `""`       | Additional CSS classes for custom styling.         |
| `animate`           | `boolean` | `true`     | Enables wiggle animation when set to `true`.       |
| `animationDuration` | `number`  | `1500`     | Duration of the wiggle animation in milliseconds.  |

## 功能特性

- **3D Text Effect**: Adds a three-dimensional stroke and shadow effect to text for a bold, layered look.
- **Customizable Colors & Sizes**: Easily adjust text color, stroke size, shadow colors, and letter spacing.
- **Wiggle Animation**: Includes an optional wiggle animation to make the text bounce for added emphasis.
- **Flexible Animation Control**: Customize the animation speed with the `animationDuration` prop.