3D Parallax

What is ThreeDParallax?

What is ThreeDParallax? The ThreeDParallax component transforms static images or layouts into engaging, interactive 3D experiences. Utilizing CSS perspective and transform-style: preserve-3d, it creates a layered depth effect. When a user hovers, the component smoothly tilts and "pops out" of the screen. Crucially, the foreground image layer shifts slightly in the opposite direction (the Parallax effect ), creating a realistic, separate sense of depth and motion. Key Features Layered 3D Motion: Creates a convincing spatial effect by handling the background and the foreground image layers independently in 3D space. Tilt & Rotation Control: Adjust the maximum rotation angle (Max Rotation) to control the intensity of the tilt on hover. Pop Out Depth: Control how far the entire component appears to pop out from the screen (Pop Out Depth). Multi-Shadow System: Use the powerful Shadows Array control to add multiple box shadows (Inside/Outside, X/Y Offset, Blur, Spread) to the background layer, allowing for complex, realistic lighting and neomorphic effects. Parallax Customization: Fine-tune the image movement intensity (Parallax XY Intensity and Parallax Z-Depth) to perfect the layered motion. Customizable Background: Easily enable or disable a solid background color behind the image layer using BG Color.