3D Parallax
Create dynamic, layered 3D tilt effects on hover with a stunning parallax layer.
Make it with Workshop
Build your own component with AI
About this Component
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.
