Text3D 3D Text Effect
Used to create a 3D text effect.
Basic Usage
Set the text attribute to specify the text content to be displayed.
Customizing Layers
Set the layer attribute to specify the number of layers for the shadow, with a larger number resulting in a stronger 3D effect.
Direction Control
Use the direction attribute to control the direction of the 3D effect, supporting top-left, top-right, bottom-left, and bottom-right directions.
Blur Effect
Add the blur attribute to enable the blur effect for the shadow.
Customizing Styles
You can customize the text style through the color, shadowColor, and letterSpacing properties.
Attributes
| Attribute 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 |