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.
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.
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.
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.
