Camera Offset

Shift and rotate the camera from its default screen position.
The page is still fully navigable — the offset is the new baseline.

Position

Shifting the Camera

x, y, and z offset the camera in CSS pixel equivalents from its default screen position. Positive x moves right, positive y moves up, positive z moves toward the content.

x offset
−150 px
Camera shifted left from center
y offset
−120 px
Camera lowered from default height
z offset
0 px
No depth change from default
Units are CSS pixels scaled by pixelSizeDefault (0.0007) — the same factor used to position all DOM elements in 3D space. Fold does not adjust the scene to compensate for the offset, so choose values carefully and verify content stays in frame.

Rotation

Aiming the Camera

rotX, rotY, and rotZ rotate the camera in degrees. Rotation is applied in YXZ (yaw → pitch → roll) order — the standard for camera-like controls.

rotX (pitch)
+9°
Nose down — looking slightly below horizon
rotY (yaw)
−14°
Slight left turn for a subtle angle
rotZ (roll)
0°
No horizon tilt

Combined with the position offset above, these values give the scene a subtle off-axis perspective — content stays fully in frame while the angle adds depth and dimension.

All other camera behaviors — WASD controls, scroll-driven view navigation — operate on top of this offset as the new baseline pose.

Data Attributes

Markup API

Set the offset directly on the Fold root element using data attributes. No JavaScript required. 

<div class="foldpage"
     
     data-foldpage-camera-offset-x="-150"
     data-foldpage-camera-offset-y="-120"
     data-foldpage-camera-offset-z="0"
     
     data-foldpage-camera-rotation-x="9"
     data-foldpage-camera-rotation-y="-14"
     data-foldpage-camera-rotation-z="0">
  ...
</div>
Data attributes are read once during Fold.init(). To change the offset at runtime, use Fold.set() instead.

JS API

init() and set()

Pass cameraOffset to Fold.init() for static configuration, or call Fold.set() at any time for live updates. 

// Static — set once at init
Fold.init({
  cameraOffset: {
    x:    -150,  // px left
    y:    -120,  // px down
    rotY: -14,   // ° yaw left
    rotX:    9,   // ° pitch down
  },
});

// Live update — e.g. animate or toggle
Fold.set({ cameraOffset: { x: 0, y: 0, rotX: 0, rotY: 0 } });

// Partial update — only changes specified axes
Fold.set({ cameraOffset: { rotY: -10 } });

Fold.set() patches the offset — you only need to specify the axes you want to change. Unspecified axes keep their current values.

XR note: cameraOffset applies only in screen mode. In AR/VR, the headset pose drives the camera and this offset has no effect — which is intentional.