Puzzle.js Reference: 3D

Note: while Puzzle.js puzzles store their state locally (via localStorage), that behavior is inhibited on this page to make it easiest to see exactly what markup produces exactly what result.

3D

Note: 3D support is in beta at this point, and the support for it is in two files that are auxiliary to puzzle.js. To use it, add puzzle-box.js and puzzle-box.css to your HTML. 3D support will likely move directly into puzzle.js and puzzle.css once it leaves beta.

3D support is built atop the Subgrids feature.

To mark a puzzle for 3D, add a puzzle-box class on your puzzle-entry, and add six subgrids. Mark each subgrid with one of the following: side-front, side-back, side-left, side-right, side-up, and side-down. The subgrids can be provided in any order. Note that this example is leveraging the subgrid feature of applying any option defined on the parent (in this case data-text) to all subgrids. Subgrids can also override where desired.

3D puzzles are currently limited to boxes, but they need not be cubes.

The subgrid faces of a box support all the behavior and styling that a 2D puzzle-entry supports. Any functionality that links cells (like edges, paths, and spokes) will work between faces, such as this train-track example.

Drag between cells to make train tracks.