Seen some cool 80's style futuristic designs and thought i'd give it a go. In the process made this cool moving grid effect. 

The effect is achieved through a combination of CSS 3D Transforms and a simple linear animation. To create the illusion of depth, the code uses a flat 2D grid, tilts it away from the viewer, and continuously slides the background texture toward the horizon.

1. The Grid Pattern (CSS)

The grid is generated using `linear-gradient`. By layering a horizontal and vertical line, we create a single "tile," then use `background-size` to repeat it infinitely.

CSS:

    background-image: 
        linear-gradient(var(--neon-cyan) 1px, transparent 1px),
        linear-gradient(90deg, var(--neon-cyan) 1px, transparent 1px);
    background-size: 50px 50px;

2. The 3D Perspective

By using the transform property, we can tip the plane backward:

* perspective(500px): Defines how "far" the viewer is. Lower numbers make the perspective more extreme.
* rotateX(60deg): Tips the plane backward so it looks like a floor stretching into the distance.

CSS

    transform: perspective(500px) rotateX(60deg);

3. The Infinite Movement

To keep it seamless, the animation doesn't move the element itself (which would leave a gap); it moves the background texture inside the element.

CSS:

    u/keyframes moveGrid {
        from { background-position: 0 0; }
        to { background-position: 0 50px; } /* Matches tile size for a seamless loop */
    }
    
    animation: moveGrid 2s linear infinite;

By setting the animation to linear, the movement never speeds up or slows down, creating that hypnotic, gliding sensation.

Hope you found this useful 

Retro-Futuristic "Infinite Grid" Landing Page with CSS 3D Transforms (Tutorial)