The Arc

θ = −90°  ·  Far Left

The Half-Circle

Five panels, one formula. Every panel in this demo shares the same translateZ(-700px) — only the rotateY angle changes to walk around the arc.

The pattern: rotate first, then fly straight back. After rotateY(φ), the local −Z axis points in a new world direction. translateZ(-700px) moves the element 700px along that direction — always landing on the circle of radius 700px centered at the origin, facing inward.

/* All 5 panels — same translateZ, different rotateY */
.panel-1.foldpage-el { transform: rotateY(-90deg)  translateZ(-700px); }
.panel-2.foldpage-el { transform: rotateY(-135deg) translateZ(-700px); }
.panel-3.foldpage-el { transform: rotateY(180deg)  translateZ(-700px); }
.panel-4.foldpage-el { transform: rotateY(135deg)  translateZ(-700px); }
.panel-5.foldpage-el { transform: rotateY(90deg)   translateZ(-700px); }

θ = −45°  ·  Left Front

The Formula Derived

For a panel at arc angle θ (measured from the forward +Z axis), its world position is (R sinθ, 0, R cosθ). For the front face to point toward the origin, the required rotateY angle φ is:

/* rotateY angle that makes front face point toward origin */
φ = 180° − θ

/* After rotateY(φ), translateZ(-R) reaches world position: */
x = R × sin(θ)
z = R × cos(θ)

/* Verify — panel-2: θ = −45° */
φ = 180 − (-45) = 225°  (= -135°)
x = 700 × sin(-45°) ≈ -495px
z = 700 × cos(-45°) ≈ +495px

The derivation: after rotateY(φ), the local −Z axis (the direction translateZ(-R) moves the element) points toward (sinφ, 0, −cosφ) in world space. Setting that equal to the unit vector from the panel back to the origin gives φ = 180° − θ.

Changing the Radius

To resize the arc, change the translateZ value. All panels update together since they share the same constant. To make the arc tighter (-400px) or more expansive (-1200px), edit one value.

θ = 0°  ·  Center Front

Center Stage

The center panel (θ = 0°) sits directly in front of the origin at world position (0, 0, 700). Its front face points in the −Z direction — straight back toward the origin. From the camera's view this panel is the most "face-on" of all five.

At θ = 0°: φ = 180° − 0° = 180°. The rotateY(180deg) flips the element so its face points toward −Z. This is the same transform used in views.html's "behind" panel — the pattern generalises.

Full Arc in a Table

Scroll Order

The camera sweeps left-to-right: P1 → P2 → P3 → P4 → P5 as you scroll down. View 0 (the logo) remains at the center of the arc and stays visible through the gaps between panels throughout the journey.

θ = +45°  ·  Right Front

Arc Variations

The half-circle is just the default. You can adapt the geometry for any angular spread by choosing how many panels and what angle range to cover.

Full Circle

/* 6 panels evenly spaced around a full 360° circle */
.p1.foldpage-el { transform: rotateY(180deg)  translateZ(-600px); } /* 0°  */
.p2.foldpage-el { transform: rotateY(120deg)  translateZ(-600px); } /* 60° */
.p3.foldpage-el { transform: rotateY(60deg)   translateZ(-600px); } /* 120°*/
.p4.foldpage-el { transform: rotateY(0deg)    translateZ(-600px); } /* 180°*/
.p5.foldpage-el { transform: rotateY(-60deg)  translateZ(-600px); } /* 240°*/
.p6.foldpage-el { transform: rotateY(-120deg) translateZ(-600px); } /* 300°*/

Narrow Fan

/* 3 panels in a 90° fan (−45°, 0°, +45°) */
.p1.foldpage-el { transform: rotateY(-135deg) translateZ(-700px); }
.p2.foldpage-el { transform: rotateY(180deg)  translateZ(-700px); }
.p3.foldpage-el { transform: rotateY(135deg)  translateZ(-700px); }

θ = +90°  ·  Far Right

Complete Template

A copy-ready arc layout. The only variable is R — change the translateZ(-R) value on all panels to resize the circle. The rotateY angles stay the same regardless of radius.

<div id="wrapper" class="foldpage">

  <header class="view-home" data-foldpage-view="0">...</header>

  <section class="p1" data-foldpage-view>Left</section>
  <section class="p2" data-foldpage-view>Left Front</section>
  <section class="p3" data-foldpage-view>Center</section>
  <section class="p4" data-foldpage-view>Right Front</section>
  <section class="p5" data-foldpage-view>Right</section>

  <div class="scroll-spacer"></div>
</div>

<style>
  #wrapper { position: relative; }

  .p1, .p2, .p3, .p4, .p5 {
    position: absolute;
    top: 300px; left: 0; right: 0; margin: 0 auto; max-width: 700px;
  }

  .scroll-spacer { height: 5000px; } /* 5 transitions × 900vh × 1.1 */

  /* R = 700px — change translateZ to resize the whole arc */
  .p1.foldpage-el { transform: rotateY(-90deg)  translateZ(-700px); }
  .p2.foldpage-el { transform: rotateY(-135deg) translateZ(-700px); }
  .p3.foldpage-el { transform: rotateY(180deg)  translateZ(-700px); }
  .p4.foldpage-el { transform: rotateY(135deg)  translateZ(-700px); }
  .p5.foldpage-el { transform: rotateY(90deg)   translateZ(-700px); }
</style>

Return to Horizontal 2 for the absolute- positioning foundation, or see all demos for more layouts.