3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
Installation
Run the following command
npx shadcn@latest add @aceternity/3d-cardExamples
With rotation
Make things float in air
Hover over this card to unleash the power of CSS perspective
Props
CardContainer
| Prop | Type | Description |
|---|---|---|
children | React.ReactNode | The child elements to be rendered within the container. |
className | string | The CSS class to be applied to the container. |
containerClassName | string | The CSS class to be applied to the outer container. |
CardBody
| Prop | Type | Description |
|---|---|---|
children | React.ReactNode | The child elements to be rendered within the body. |
className | string | The CSS class to be applied to the body. |
CardItem
| Prop | Type | Description |
|---|---|---|
as | React.ElementType | The HTML tag to be used for the item. Defaults to "div". |
children | React.ReactNode | The child elements to be rendered within the item. |
className | string | The CSS class to be applied to the item. |
translateX | number or string | The X translation of the item. |
translateY | number or string | The Y translation of the item. |
translateZ | number or string | The Z translation of the item. |
rotateX | number or string | The X rotation of the item. |
rotateY | number or string | The Y rotation of the item. |
rotateZ | number or string | The Z rotation of the item. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
