3D Pin

A Vue component that creates a 3D pin effect with hover animations.

Usage

3D Pin
Deneme UI
Customizable Tailwind CSS and GSAP Components.

Slots

SlotDescription
defaultContent for the main card.
pinContent for the pin element.

Events

EventDescription
mouseenterEmitted when the mouse enters the component.
mouseleaveEmitted when the mouse leaves the component.

How it Works

  1. The component renders a container with a pin and a card.
  2. On hover, the card scales down and rotates, revealing the pin.
  3. The pin and its accessories (stripe, dot, and animated circles) become visible on hover.
  4. The component uses CSS transitions and animations for smooth effects.

Customization

You can customize the appearance of the ThreeDPin component:

  • Modify the content of the pin and card using the provided slots.
  • Adjust the CSS variables in the <style> section to change colors, sizes, and animation properties.
  • Extend the component's functionality by listening to the mouseenter and mouseleave events.

Note

The ThreeDPin component uses CSS 3D transforms and animations. Ensure that your target browsers support these features for the best experience.

3D Carousel
A Vue component that creates an interactive 3D carousel using Three.js and GSAP.
3D Card Effect
A set of components for creating interactive 3D card effects with hover animations.