Perspective Grid Effect Debugging
Live Controls (Test 6)
Perspective Distance
500px
Rotation (rotateX)
60deg
Grid Size
60px
Line Thickness
2px
Horizontal Opacity
0.6
Vertical Opacity
0.3
Mask Fade Point
70%
Reset to Defaults
Copy Test 6 CSS
Diagnostic Info
Problem:
Grid invisible due to:
perspective() in transform (should be on parent)
rotateX(75deg) too extreme
opacity too low (0.3/0.15)
Solutions:
Use rotateX(60-65deg)
Increase opacity (0.6/0.3)
Thicker lines (2px)
Test 1: Current (Broken)
Test 2: Fixed Perspective
Test 3: No Mask
Test 4: Brighter Grid
Test 5: Animated
Test 6: Custom (Use Controls →)
Test 7: Synthwave Style
Test 8: Tron Style