Left & Right

Horizontal Layout Technique

Y Compensation

HTML elements flow vertically — each section sits lower on the page than the one before it. In a standard Fold layout that natural Y offset becomes part of the element's 3D world position. For a horizontal layout, where all panels should sit at roughly the same height, you need to cancel that offset with a negative translateY.

The Technique

The key rule: put translateY(-offset) before any rotation in the transform chain. CSS transforms apply left-to-right, each one changing the local coordinate frame. If translateY comes first — before rotateY — it operates in the original world frame and cancels the element's page-scroll Y position exactly. If it comes after a rotation, the Y axis is no longer aligned with the world Y axis and the compensation will be off.

/* ✓ translateY FIRST — works in world frame */
.panel.foldpage-el {
  transform:
    translateY(-1880px)   /* cancel page Y, world frame */
    rotateY(20deg)       /* now rotate local frame */
    translateX(-440px)  /* move in rotated local X */
    translateZ(-200px); /* depth in rotated local Z */
}

/* ✗ translateY AFTER rotation — compensates wrong axis */
.panel.foldpage-el {
  transform:
    rotateY(20deg)
    translateY(-1880px)  /* now tilted — wrong! */
    translateX(-440px);
}

Estimating the Offset

The offset is the vertical center of the element in the page, measured in CSS pixels from the top of the document. A rough estimate:

For this demo, with a min-height: 115vh home section (~1050px at a 900px viewport) and panels averaging ~520px slot height (content + 100px margin):

Tuning in Practice

These estimates are calculated for a ~900px tall viewport. At different viewport heights, min-height: 115vh produces different absolute pixel values, shifting all subsequent panels. If the horizontal alignment looks off, adjust the translateY values in increments of a few hundred pixels.

An alternative approach: set a fixed pixel height on the home section (e.g. height: 900px) rather than min-height: 115vh. This makes the Y offsets viewport-independent and easier to calculate.

Combining X, Z, and Y

After the Y compensation, the remaining transforms position the panel in the horizontal plane. The outer panels in this demo use a stronger rotateY and are pushed slightly forward in Z (translateZ(160px)) so they arc toward the viewer — creating the impression of a curved horizontal stage rather than a flat row. The inner panels are pushed slightly back (translateZ(-200px)) to reinforce the curve.