Text3D 3D Text Effect
Used to create a 3D text effect.
Basic Usage
Set the text property to specify the text content to be displayed.
Customizing Layers
Set the layer property to specify the number of layers for the shadow, with a larger number resulting in a stronger 3D effect.
Direction Control
Use the direction property to control the direction of the 3D effect, supporting top-left, top-right, bottom-left, and bottom-right directions.
Blur Effect
Add the blur property to enable the blur effect for the shadow.
Customizing Styles
You can customize the text style through the color, shadowColor, and letterSpacing properties.
Properties
| Property Name | Description | Type | Default Value |
|---|---|---|---|
| text | Text content to be displayed | string | — |
| color | Text color | string | var(--onl-primary) |
| shadowColor | Shadow color | string | var(--onl-purple-900) |
| layer | Number of layers for the 3D effect | number | 5 |
| letterSpacing | Letter spacing | string | '0' |
| direction | Direction of the 3D effect | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | — |
| blur | Whether to enable the blur effect | boolean | false |