Rotate3D

Rotate3D
Rotate3D

About Rotate3D

This is a 3D Interactive Component that transforms any child element into an interactive 3D object that responds to mouse movement. Here’s a comprehensive description: Core Functionality: The component creates a 3D transformation effect on its content, allowing users to rotate and manipulate objects in 3D space using mouse interactions. It supports two interaction modes: drag-to-rotate and hover-to-follow. Key Features: 1. Dual Interaction Modes: - Drag Mode (default): Click and drag to manually rotate the object in any direction with full 360-degree rotation capability - Hover Mode: The object automatically follows your cursor position across the entire viewport, creating a dynamic tracking effect 2. Customizable Controls: - Sensitivity (0.1-5): Adjusts how responsive the rotation is to mouse movement - higher values create more dramatic rotations - Dragging Toggle: Switch between drag-to-rotate and hover-to-follow modes - Rotation Limit (0-180°): Sets maximum rotation angles (though currently allows 360° rotation in practice) - Perspective (100-3000px): Controls the 3D depth effect - lower values create more dramatic perspective, higher values create subtler effects 3. Initial Positioning: - Set starting X and Y rotation angles (-180° to 180°) to position your object at a specific angle when the component loads 4. Visual Customization: - Background Color: Fully customizable background (defaults to transparent) - Content Slot: Insert any Framer component or element as the 3D object - Smooth transitions with easing for natural movement 5. Technical Details: - Uses CSS 3D transforms with `preserve-3d` for authentic 3D rendering - Viewport-wide cursor tracking in hover mode for seamless interaction - Minimum 5×5px size ensures visibility on canvas - Overflow hidden to prevent background elements from appearing outside bounds - Optimized with React transitions for performance Use Cases: Perfect for product showcases, interactive cards, portfolio pieces, hero sections, or any element you want to add engaging 3D interactivity to..

From Gaurav Design

Tile wave background
Valentine Proposal
Coordinate Cursor
Curly Cursor

Related Components

silhouet animated BG
3d Interactive Stars
ASCII Hero
ElasticGridPro