Building a 3D Maze Game with CSS3D: Concepts, Camera, Player Movement, and Shortest Path Finding

The article begins by introducing CSS3D properties such as perspective , perspective-origin , and transform-style: preserve-3d , explaining that they form the basis of a 3D world in web development.

It describes the left‑hand coordinate system used in CSS3D, where the thumb represents the X‑axis, the index finger the Y‑axis, and the remaining fingers the Z‑axis, and shows how the transform property can translate, rotate, scale, and stretch 3D elements.

To build the 3D scene, the tutorial outlines the required HTML structure: a camera div , a ground div , a chessboard div , and a player div (a cube). The accompanying CSS defines the size, transform-style , transform-origin , and transition for the cube, as well as the walls of the cube using :nth-child selectors.

JavaScript code is provided to implement a pseudo‑3D camera. Mouse events ( mousedown , mousemove , mouseup ) track the previous cursor position and determine direction. The camera rotation around the Z‑axis is performed by constructing a rotation matrix with a custom Matrix4 class and applying it via style.transform = `matrix3d(${new_mar.join(',')})` . Mouse wheel events adjust the perspective value to zoom in and out.

The player movement is handled by listening to onkeydown events for the keys w , s , a , and d . A position object stores the current X and Y coordinates, and a lastTransform object records the latest translation and rotation values, which are combined into a CSS transform string and applied to the player element.

The maze itself is generated from a 15×15 two‑dimensional array where 0 denotes a walkable cell and 1 an obstacle. The array is iterated to create div elements for each cell; obstacle cells clone a predefined block element representing a wall.

To find the shortest path from the start to the goal, the tutorial implements a breadth‑first search (BFS) algorithm. It uses a queue to explore neighboring cells, a memory matrix to avoid revisiting nodes, and stores parent references to reconstruct the path. The resulting path is highlighted on the board by toggling a pan-path CSS class when the user clicks a “tip” button.

Finally, the article suggests possible extensions such as adding items, multiple levels, or jumping mechanics, and provides links to a live demo and the source code repository.