3D Card Effect

A card perspective effect, hover over the card to elevate card elements.

Examples

With rotation

API

CardContainer

The CardContainer component serves as a wrapper for the 3D card effect. It manages mouse events to create a 3D perspective.

Props

Prop NameTypeDefaultDescription
classStringnullAdditional classes for styling the inner container element.
containerClassStringnullAdditional classes for styling the outer container element.

Usage

MyCardComponent.vue 
<CardContainer containerClass="additional-class">
  <!-- Your content here -->
</CardContainer>

CardBody

The CardBody component is a flexible container with preserved 3D styling. It is intended to be used within a CardContainer to hold content with a 3D transformation effect.

Props

Prop NameTypeDefaultDescription
classStringnullAdditional classes for custom styling.

Usage

MyCardComponent.vue 
<CardBody class="custom-class">
  <!-- Your content here -->
</CardBody>

CardItem

The CardItem component represents individual items within the 3D card. It supports various transformations (translation and rotation) to create dynamic 3D effects.

Props

Prop NameTypeDefaultDescription
asString"div"The HTML tag or component to use for the item.
classStringnullAdditional classes for styling the item.
translateXNumber/String0X-axis translation in pixels.
translateYNumber/String0Y-axis translation in pixels.
translateZNumber/String0Z-axis translation in pixels, used to control the depth effect.
rotateXNumber/String0X-axis rotation in degrees.
rotateYNumber/String0Y-axis rotation in degrees.
rotateZNumber/String0Z-axis rotation in degrees.

Usage

MyCardComponent.vue 
<CardItem as="p" translateZ="50" class="custom-item-class">
  Your text or content here
</CardItem>

Component Code

You can copy and paste the following code to create these components:

CardContainer.vue
CardBody.vue
CardItem.vue
useMouseState.ts
Component Index
List of all the components provided by Inspira UI.
Blur Reveal
A component to smoothly blur fade in content.