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.