Installation
All Components
3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
Usage
Import the components and use them in your React application:
Make things float in air
Hover over this card to see the effect in action.
Installation
You can install this component using your preferred package manager. Choose one of the following commands:
npm install @your-package/3d-card-effectbash
yarn add @your-package/3d-card-effectbash
pnpm add @your-package/3d-card-effectbash
After installation, you can import and use the component in your project as shown in the usage example above.
Props
CardContainer
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be displayed inside the card container |
| className | string | '' | Additional CSS classes to apply to the card container |
| containerClassName | string | '' | Additional CSS classes to apply to the outer container |
CardBody
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be displayed inside the card body |
| className | string | '' | Additional CSS classes to apply to the card body |
CardItem
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | 'div' | The HTML element to render the card item as |
| children | React.ReactNode | - | The content to be displayed inside the card item |
| className | string | '' | Additional CSS classes to apply to the card item |
| translateX | number | string | 0 | The X-axis translation value |
| translateY | number | string | 0 | The Y-axis translation value |
| translateZ | number | string | 0 | The Z-axis translation value |
| rotateX | number | string | 0 | The X-axis rotation value |
| rotateY | number | string | 0 | The Y-axis rotation value |
| rotateZ | number | string | 0 | The Z-axis rotation value |
Customization
You can customize the appearance of the card and its items by passing additional classes through the className prop:
<CardContainer className="custom-container-class">
<CardBody className="custom-body-class">
<CardItem
translateZ={50}
className="custom-item-class"
>
Custom content
</CardItem>
</CardBody>
</CardContainer>jsx
DADUH AI