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.

thumbnail

Installation

You can install this component using your preferred package manager. Choose one of the following commands:

npm install @your-package/3d-card-effect
bash
yarn add @your-package/3d-card-effect
bash
pnpm add @your-package/3d-card-effect
bash

After installation, you can import and use the component in your project as shown in the usage example above.

Props

CardContainer

PropTypeDefaultDescription
childrenReact.ReactNode-The content to be displayed inside the card container
classNamestring''Additional CSS classes to apply to the card container
containerClassNamestring''Additional CSS classes to apply to the outer container

CardBody

PropTypeDefaultDescription
childrenReact.ReactNode-The content to be displayed inside the card body
classNamestring''Additional CSS classes to apply to the card body

CardItem

PropTypeDefaultDescription
asReact.ElementType'div'The HTML element to render the card item as
childrenReact.ReactNode-The content to be displayed inside the card item
classNamestring''Additional CSS classes to apply to the card item
translateXnumber | string0The X-axis translation value
translateYnumber | string0The Y-axis translation value
translateZnumber | string0The Z-axis translation value
rotateXnumber | string0The X-axis rotation value
rotateYnumber | string0The Y-axis rotation value
rotateZnumber | string0The 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