Views & Navigation

CSS 3D Transforms

Positioning Views in Space

Every element inside .foldpage gets a foldpage-el class added by Fold as it processes the DOM. Your CSS can target .myclass.foldpage-el to apply 3D transforms that are invisible to the browser's layout engine but drive the element's position and orientation in the Three.js scene.

The Approach: Rotate, then Translate

CSS transforms apply left to right, where each function operates in the coordinate frame established by the previous ones. The pattern used throughout this demo is: rotate first to set the facing direction, then translate to move the element to its position along the original world axes.

Transforms Used in This Demo

Overriding the Camera Orientation

By default, the camera faces a view head-on — it positions itself along the element's surface normal and looks back at the element. You can override this with an explicit angle using data-foldpage-view-rotation="x y z":

<!-- Camera approaches from a 30° angle on Y -->
<section
  data-foldpage-view
  data-foldpage-view-rotation="0 30 0"
>
  Side-angle view
</section>

<!-- Shift the focal point 50px right, 20px up -->
<section
  data-foldpage-view
  data-foldpage-view-origin="50 20 0"
>
  Off-center framing
</section>

A Precedent for Spatial Design

The idea that information can exist in a true multi-dimensional landscape was being researched at MIT's Visible Language Workshop in the late 1970s and 80s. Muriel Cooper and her students were asking what design principles would need to be invented from scratch for an information environment without the physical constraints of print.

Her 1994 TED talk, delivered just a year before her death, demonstrated software that let type move freely through three dimensions — layers dissolving, zooming, rotating — with the reader navigating the information landscape rather than consuming it linearly.

"Traditional design principles must be re-examined and new visual vocabularies invented to be consonant with this multi-dimensional information environment."

Fold.page is one attempt to build on that sketch using today's WebGL, WebXR, and the familiar vocabulary of HTML and CSS that billions of pages already speak. The view system is a direct expression of that idea: your content has a position in space, and navigation is the act of moving through it.

Coordinate System

Fold maps CSS pixels to world units using a scale factor of 0.0007 units/px (pixelSizeDefault). The default camera sits at roughly z = +0.7 world units, looking toward the origin. In CSS pixel terms, 1000px in Z places an element about 0.7 world units away from origin — roughly one camera-distance behind the default viewing position.

Axis directions in CSS 3D match Fold's scene: +X = right, +Y = down (CSS convention), +Z = toward viewer. Positive translateZ brings elements forward; negative values push them behind.