Depth on Hover

A simple 2D square sits in the center. Hover your mouse over it. The shape will tilt into perspective and grow a "tail" of layers, instantly transforming into a 3D block.

This uses CSS 3D Transforms and Layer Stacking. By duplicating the element and offsetting it along the Z-axis, we simulate "extrusion."

The "illusion" here is the shock of transition—the brain is primed to see flat UI elements, so a sudden shift into 3D perspective creates a powerful sense of depth and weight.

Use Intensity to control the height of the extrusion. At 1.0, it feels like a standard block. At 2.0, it becomes a long rectangular beam stretching into the screen.