3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/3d-card.jsonExamples
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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is the man! He is the best front-end developer I have worked with.
He took the requirements and quite literally ran with them. We are super happy with the result and product we go...
John Shahawy
Founder at Rogue and Moonbeam