Ring Outward

Slot 0  ·  North  ·  θ = 0°

User-Controlled Facing

The ring layout auto-rotates panels to face inward. Adding data-foldpage-rotate-y="180" flips a panel outward — positions stay unchanged, only facing changes.

/* Preferred: data attribute for outward facing */
<section data-foldpage-view
         data-foldpage-rotate-y="180">

/* Composition (done by the layout service) */
β_auto  = 180° − θ          /* inward */
β_final = β_auto + 180°    /* = −θ   outward */

/* Result for North (θ=0°): β_final = 0° */
translateZ(-700px) rotateY(0deg)

Slot 1  ·  Northeast  ·  θ = 60°

Partial Overrides

Facing can be set per-panel — mix inward and outward on the same ring, or use any arbitrary angle. All three rotation sources compose together.

/* Preferred: data attribute (works regardless of CSS class timing) */
<section data-foldpage-view
         data-foldpage-rotate-y="180">

/* Also works: inline style */
<section data-foldpage-view
         style="transform: rotateY(180deg)">

/* Also works: CSS class (not .foldpage-el dependent) */
.panel { transform: rotateY(180deg); }

Slot 2  ·  Southeast  ·  θ = 120°

Inward vs Outward

Inward (default): camera outside, logo in front — panels face the viewer as they ring the center.
Outward (this demo): camera inside, logo behind — panels face away, viewer looks outward from the center.

Slot 3  ·  South  ·  θ = 180°

Composing Transforms

The layout reads per-panel rotate attributes, inline styles, and CSS class transforms all at init time and sums them. The total user rotation is composed with the layout's auto-rotation on every applyPositionTransform call.

On Fold.destroy(), all injected inline styles are removed and the original element state is fully restored.

Slot 4  ·  Southwest  ·  θ = 240°

Live Updates

Fold.set({ viewLayout: { strength: 1.5 } }) patches the ring radius in place without reinitialising Fold. Position transforms are recomputed from the saved state — the user's rotation is preserved.

Fold.set({
  viewLayout: {
    strength: 1.5,          /* grow the ring */
    start:    30,            /* rotate the ring */
  }
});

Slot 5  ·  Northwest  ·  θ = 300°

Complete Template

<div class="foldpage"
     data-foldpage-view-layout="ring"
     data-foldpage-view-layout-count="6">

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

  <!-- data-foldpage-rotate-y="180" flips panels to outward-facing -->
  <section data-foldpage-view data-foldpage-rotate-y="180">N</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">NE</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">SE</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">S</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">SW</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">NW</section>

</div>

See Ring Inward, Ring Arc, or all demos.