3D Card Effect

A set of components for creating interactive 3D card effects with hover animations.

Usage Example

Customize as you wish
Play with different multiplier-x and multiplier-y values
Looks cool right?

Customization

You can customize the 3D Card Effect by:

  • Adjusting the multiplierX and multiplierY props on CardContainer
  • Modifying the translateZ and boxShadow props on CardItem
  • Applying custom CSS classes or styles to the components
  • Using slots to insert complex content into the cards
Give depth to your Card items
Hover over this card to unleash the power of CSS perspective
You can also increase elevation of any CardItem component

CardContainer

The CardContainer component wraps all CardItem components and manages the 3D effect behavior.

PropTypeDefaultDescription
multiplierX
Number
20Multiplier for the X-axis rotation effect.
multiplierY
Number
10Multiplier for the Y-axis rotation effect.

CardItem

The CardItem component represents an individual element within the 3D card that can have its own depth effect.

PropTypeDefaultDescription
translateZ
Number
30The Z-axis translation distance in pixels when hovered.
boxShadow
Boolean
falseWhether to apply a box shadow effect when hovered.

Slots

Both CardContainer and CardItem use the default slot for their content.

SlotDescription
defaultContent for the card container or card item.

Best Practices

  1. Wrap all CardItem components within a CardContainer.
  2. Adjust the multiplierX and multiplierY props on CardContainer to control the intensity of the 3D effect.
  3. Use different translateZ values for CardItem components to create a sense of depth.
  4. Consider disabling boxShadow on some CardItem components for varied visual effects.
  5. Experiment with nested CardItem components for complex layouts.

Accessibility

While these components create visually appealing effects, ensure that the content remains accessible to all users, including those using screen readers or keyboard navigation.

Implementation Details

The CardContainer component handles the mouse movement tracking and applies the 3D rotation effect. It also provides the hover state context to its child components.

Key features:

  • Uses CSS variables for dynamic rotation values
  • Implements mouse event handlers for interactive effects
  • Provides hover state context using Vue's provide API

The CardItem component represents individual elements within the 3D card that can have their own depth effect.

Key features:

  • Applies Z-axis translation based on the translateZ prop
  • Conditionally applies a box shadow effect
  • Uses Vue's inject API to respond to the parent's hover state

For the full implementation details, please refer to the source code of each component.

3D Pin
A Vue component that creates a 3D pin effect with hover animations.
Floating Label Input
A Vue component that creates an input field with a floating label and animated underline.