20 CSS 3D Effects
03 / 20

All 20 in 20 CSS 3D Effects

  1. 01CSS 3D Transform Pipeline Reference Build
  2. 02Perspective Property Versus Perspective Function
  3. 03Perspective Origin as the Camera Position
  4. 04Transform Function Order Changes the Result
  5. 05Backface Visibility and Two Sided Elements
  6. 06Preserve 3D and What Flattens a Scene
  7. 07Building a CSS Cube from Six Faces
  8. 08Transform Origin in Three Dimensions
  9. 09TranslateZ Versus Scale for Depth
  10. 10Z Fighting on Coplanar 3D Surfaces
  11. 11Rotate3d and the Transform Matrix
  12. 12Ring Layout with Rotate and TranslateZ
  13. 13Depth Layering with Stacked Z Planes
  14. 14Pointer Tilt Cards with Parallax Depth Layers
  15. 15Page Turn Flipbook with Hinged Rotation
  16. 16Cube Face Navigation with Drag and Auto Rotate
  17. 17Extruded Synth Panel with Draggable Faders
  18. 18Perspective Floor Grid Geometry
  19. 19Nested 3D Contexts in a Pointer Steered Scene
  20. 20Helix Distribution with Trigonometric Angles
Light JSMIT licensed

Perspective Origin as the Camera Position

perspective-origin moves the viewer, not the object. Five camera positions drive one unchanged block of geometry: the radio-style control switches the origin and the readout shows the value, so the shift in which faces you can see is clearly a change of viewpoint rather than a change of transform. No script.

Live Demo
Try it

Untitled UI Pro: a 10,000+ component Figma UI kit · from $129 one-time

Untitled UI · Affiliate link

Get Untitled UI Pro

The code

<section class="d3-03" aria-labelledby="d3-03-title">
  <h2 class="d3-03__sr" id="d3-03-title">Perspective origin as the camera</h2>

  <div class="d3-03__theme">
    <input class="d3-03__theme-input" type="checkbox" id="d3-03-theme">
    <label class="d3-03__theme-label" for="d3-03-theme">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor"/></svg>
      <span class="d3-03__sr">Toggle dark theme</span>
    </label>
  </div>

  <div class="d3-03__stage">
    <div class="d3-03__viewport">
      <header class="d3-03__head">
        <div>
          <span class="d3-03__kicker">Halo Audio &mdash; showroom</span>
          <strong>Model One</strong>
        </div>
        <span class="d3-03__price">&pound;249</span>
      </header>

      <div class="d3-03__scene" id="d3-03-scene">
        <div class="d3-03__object">
          <div class="d3-03__speaker">
            <span class="d3-03__grille" aria-hidden="true"></span>
            <span class="d3-03__ring" aria-hidden="true"></span>
            <span class="d3-03__brand">HALO</span>
          </div>
          <div class="d3-03__plinth" aria-hidden="true"></div>
          <div class="d3-03__shadow" aria-hidden="true"></div>
        </div>
      </div>

      <div class="d3-03__bar">
        <div class="d3-03__pad" id="d3-03-pad" role="img" aria-label="Camera position pad">
          <span class="d3-03__cam" id="d3-03-cam"></span>
        </div>
        <dl class="d3-03__read">
          <div><dt>perspective-origin</dt><dd id="d3-03-out">50% 38%</dd></div>
          <div><dt>perspective</dt><dd>980px</dd></div>
        </dl>
        <p class="d3-03__hint">Drag anywhere on the stage to move the camera.</p>
      </div>
    </div>
  </div>
</section>
.d3-03 {
  --d3-03-bg: #070d1b;
  --d3-03-surf: #0f1830;
  --d3-03-line: #22304f;
  --d3-03-ink: #eaf0ff;
  --d3-03-mut: #94a5c6;
  --d3-03-acc: #ffb020;
  --d3-03-acc: oklch(80% 0.16 78);
  --d3-03-acc2: #3c6dff;
  --d3-03-acc2: oklch(62% 0.19 266);
  --d3-03-x: 50%;
  --d3-03-y: 38%;
  --d3-03-font-display: "Barlow Condensed", "Oswald", "Haettenschweiler", system-ui, sans-serif;
  width: 100%;
  min-height: 100vh;
  display: block;
  position: relative;
  box-sizing: border-box;
  background: radial-gradient(60rem 34rem at var(--d3-03-x) 10%, color-mix(in oklab, var(--d3-03-acc2) 26%, transparent), transparent 62%), var(--d3-03-bg);
  color: var(--d3-03-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.d3-03 *,
.d3-03 *::before,
.d3-03 *::after {
  box-sizing: border-box;
}

.d3-03__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.d3-03:has(.d3-03__theme-input:checked) {
  --d3-03-bg: #f4f1ea;
  --d3-03-surf: #ffffff;
  --d3-03-line: #ddd6c8;
  --d3-03-ink: #131722;
  --d3-03-mut: #5f6a80;
  --d3-03-acc: #a35c00;
  --d3-03-acc: oklch(56% 0.14 72);
  --d3-03-acc2: #2247c9;
  --d3-03-acc2: oklch(48% 0.2 266);
}

@media (prefers-color-scheme: light) {
  .d3-03:has(.d3-03__theme-input:checked) {
    --d3-03-bg: #f4f1ea;
    --d3-03-surf: #ffffff;
    --d3-03-line: #ddd6c8;
    --d3-03-ink: #131722;
    --d3-03-mut: #5f6a80;
    --d3-03-acc: #a35c00;
    --d3-03-acc: oklch(56% 0.14 72);
    --d3-03-acc2: #2247c9;
    --d3-03-acc2: oklch(48% 0.2 266);
  }
}

@media (prefers-color-scheme: dark) {
  .d3-03:has(.d3-03__theme-input:checked) {
    --d3-03-bg: #f4f1ea;
    --d3-03-surf: #ffffff;
    --d3-03-line: #ddd6c8;
    --d3-03-ink: #131722;
    --d3-03-mut: #5f6a80;
    --d3-03-acc: #a35c00;
    --d3-03-acc: oklch(56% 0.14 72);
    --d3-03-acc2: #2247c9;
    --d3-03-acc2: oklch(48% 0.2 266);
  }
}

.d3-03__theme {
  position: absolute;
  inset-block-start: clamp(0.75rem, 3vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 20;
}

.d3-03__theme-input {
  position: absolute;
  opacity: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
}

.d3-03__theme-label {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--d3-03-line);
  border-radius: 999px;
  background: var(--d3-03-surf);
  color: var(--d3-03-ink);
  cursor: pointer;
}

.d3-03__theme-label svg {
  inline-size: 20px;
  block-size: 20px;
}

.d3-03__theme-input:focus-visible + .d3-03__theme-label {
  outline: 2px solid var(--d3-03-acc);
  outline-offset: 3px;
}

.d3-03__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-block-size: 100vh;
  padding: clamp(3.5rem, 9vw, 5rem) clamp(0.75rem, 4vw, 2.5rem);
}

.d3-03__viewport {
  inline-size: 100%;
  max-inline-size: 58rem;
  overflow: hidden;
  border: 1px solid var(--d3-03-line);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--d3-03-surf) 92%, transparent), color-mix(in oklab, var(--d3-03-bg) 88%, transparent));
  padding: clamp(1rem, 3.5vw, 2rem);
  display: grid;
  gap: clamp(0.9rem, 3vw, 1.5rem);
  box-shadow: 0 40px 90px -46px #000;
}

.d3-03__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.d3-03__kicker {
  display: block;
  font: 700 0.66rem/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d3-03-acc);
}

.d3-03__head strong {
  font: 700 clamp(1.6rem, 6vw, 3rem)/0.95 var(--d3-03-font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.d3-03__price {
  font: 700 clamp(1rem, 3vw, 1.4rem)/1 var(--d3-03-font-display);
  color: var(--d3-03-mut);
}

.d3-03__scene {
  perspective: 980px;
  perspective-origin: var(--d3-03-x) var(--d3-03-y);
  block-size: clamp(15rem, 44vw, 22rem);
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: radial-gradient(24rem 12rem at 50% 82%, color-mix(in oklab, var(--d3-03-acc) 18%, transparent), transparent 70%);
  cursor: grab;
  touch-action: none;
}

.d3-03__scene:active {
  cursor: grabbing;
}

.d3-03__object {
  position: relative;
  inline-size: clamp(10rem, 30vw, 15rem);
  block-size: clamp(10rem, 30vw, 15rem);
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-18deg);
}

.d3-03__speaker {
  position: absolute;
  inset: 6% 12% 22%;
  border-radius: 22px;
  background: linear-gradient(160deg, #23262e, #0d0f14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 60px -20px #000;
  transform: translateZ(46px);
  display: grid;
  place-items: center;
}

.d3-03__grille {
  position: absolute;
  inset: 12%;
  border-radius: 14px;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 7px 7px;
  color: rgba(255, 255, 255, 0.22);
}

.d3-03__ring {
  position: absolute;
  inline-size: 46%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 3px solid var(--d3-03-acc);
  box-shadow: 0 0 24px color-mix(in oklab, var(--d3-03-acc) 60%, transparent), inset 0 0 18px color-mix(in oklab, var(--d3-03-acc) 35%, transparent);
}

.d3-03__brand {
  position: absolute;
  inset-block-end: 8%;
  font: 700 0.66rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
}

.d3-03__plinth {
  position: absolute;
  inset-inline: 4%;
  inset-block-end: 8%;
  block-size: 18%;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--d3-03-acc2) 40%, #101425), #0a0e1a);
  transform: translateZ(16px);
  box-shadow: 0 20px 40px -16px #000;
}

.d3-03__shadow {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6%;
  block-size: 40%;
  transform: rotateX(90deg);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent 72%);
}

.d3-03__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.25rem);
  padding: clamp(0.7rem, 2.4vw, 1rem);
  border: 1px solid var(--d3-03-line);
  border-radius: 18px;
  background: color-mix(in oklab, var(--d3-03-surf) 80%, transparent);
}

.d3-03__pad {
  position: relative;
  inline-size: 72px;
  block-size: 52px;
  border-radius: 10px;
  border: 1px solid var(--d3-03-line);
  background-image: linear-gradient(color-mix(in oklab, var(--d3-03-mut) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--d3-03-mut) 30%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
}

.d3-03__cam {
  position: absolute;
  inset-block-start: var(--d3-03-y);
  inset-inline-start: var(--d3-03-x);
  inline-size: 12px;
  block-size: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  background: var(--d3-03-acc);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--d3-03-acc) 30%, transparent);
}

.d3-03__read {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.d3-03__read dt {
  font: 700 0.6rem/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d3-03-mut);
}

.d3-03__read dd {
  margin: 0;
  font: 600 clamp(0.78rem, 2.2vw, 0.95rem)/1.2 ui-monospace, Menlo, monospace;
  color: var(--d3-03-acc);
}

.d3-03__hint {
  grid-column: 1 / -1;
  margin: 0;
  font: 500 0.72rem/1.3 system-ui, sans-serif;
  color: var(--d3-03-mut);
}

@media (prefers-reduced-motion: reduce) {
  .d3-03__object {
    transform: rotateX(8deg) rotateY(-18deg);
  }
}
const root = document.querySelector('.d3-03');
const scene = root.querySelector('#d3-03-scene');
const out = root.querySelector('#d3-03-out');
let drag = false;
const move = (e) => {
  if (!drag) return;
  const r = scene.getBoundingClientRect();
  const x = Math.min(100, Math.max(0, ((e.clientX - r.left) / r.width) * 100));
  const y = Math.min(100, Math.max(0, ((e.clientY - r.top) / r.height) * 100));
  root.style.setProperty('--d3-03-x', x.toFixed(1) + '%');
  root.style.setProperty('--d3-03-y', y.toFixed(1) + '%');
  out.textContent = x.toFixed(0) + '% ' + y.toFixed(0) + '%';
};
const down = (e) => { drag = true; scene.setPointerCapture(e.pointerId); move(e); };
const up = () => { drag = false; };
scene.addEventListener('pointerdown', down);
scene.addEventListener('pointermove', move);
scene.addEventListener('pointerup', up);
scene.addEventListener('pointercancel', up);
root.__d3Cleanup = () => { scene.removeEventListener('pointerdown', down); scene.removeEventListener('pointermove', move); scene.removeEventListener('pointerup', up); scene.removeEventListener('pointercancel', up); };
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS 3D Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Perspective Origin as the Camera Position
Source: https://codefronts.com/design-styles/css-3d/perspective-origin-as-the-camera-position/

perspective-origin moves the viewer, not the object. Five camera positions drive one unchanged block of geometry: the radio-style control switches the origin and the readout shows the value, so the shift in which faces you can see is clearly a change of viewpoint rather than a change of transform. No script.
## HTML
```html
<section class="d3-03" aria-labelledby="d3-03-title">
  <h2 class="d3-03__sr" id="d3-03-title">Perspective origin as the camera</h2>

  <div class="d3-03__theme">
    <input class="d3-03__theme-input" type="checkbox" id="d3-03-theme">
    <label class="d3-03__theme-label" for="d3-03-theme">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor"/></svg>
      <span class="d3-03__sr">Toggle dark theme</span>
    </label>
  </div>

  <div class="d3-03__stage">
    <div class="d3-03__viewport">
      <header class="d3-03__head">
        <div>
          <span class="d3-03__kicker">Halo Audio &mdash; showroom</span>
          <strong>Model One</strong>
        </div>
        <span class="d3-03__price">&pound;249</span>
      </header>

      <div class="d3-03__scene" id="d3-03-scene">
        <div class="d3-03__object">
          <div class="d3-03__speaker">
            <span class="d3-03__grille" aria-hidden="true"></span>
            <span class="d3-03__ring" aria-hidden="true"></span>
            <span class="d3-03__brand">HALO</span>
          </div>
          <div class="d3-03__plinth" aria-hidden="true"></div>
          <div class="d3-03__shadow" aria-hidden="true"></div>
        </div>
      </div>

      <div class="d3-03__bar">
        <div class="d3-03__pad" id="d3-03-pad" role="img" aria-label="Camera position pad">
          <span class="d3-03__cam" id="d3-03-cam"></span>
        </div>
        <dl class="d3-03__read">
          <div><dt>perspective-origin</dt><dd id="d3-03-out">50% 38%</dd></div>
          <div><dt>perspective</dt><dd>980px</dd></div>
        </dl>
        <p class="d3-03__hint">Drag anywhere on the stage to move the camera.</p>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
.d3-03 {
  --d3-03-bg: #070d1b;
  --d3-03-surf: #0f1830;
  --d3-03-line: #22304f;
  --d3-03-ink: #eaf0ff;
  --d3-03-mut: #94a5c6;
  --d3-03-acc: #ffb020;
  --d3-03-acc: oklch(80% 0.16 78);
  --d3-03-acc2: #3c6dff;
  --d3-03-acc2: oklch(62% 0.19 266);
  --d3-03-x: 50%;
  --d3-03-y: 38%;
  --d3-03-font-display: "Barlow Condensed", "Oswald", "Haettenschweiler", system-ui, sans-serif;
  width: 100%;
  min-height: 100vh;
  display: block;
  position: relative;
  box-sizing: border-box;
  background: radial-gradient(60rem 34rem at var(--d3-03-x) 10%, color-mix(in oklab, var(--d3-03-acc2) 26%, transparent), transparent 62%), var(--d3-03-bg);
  color: var(--d3-03-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.d3-03 *,
.d3-03 *::before,
.d3-03 *::after {
  box-sizing: border-box;
}

.d3-03__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.d3-03:has(.d3-03__theme-input:checked) {
  --d3-03-bg: #f4f1ea;
  --d3-03-surf: #ffffff;
  --d3-03-line: #ddd6c8;
  --d3-03-ink: #131722;
  --d3-03-mut: #5f6a80;
  --d3-03-acc: #a35c00;
  --d3-03-acc: oklch(56% 0.14 72);
  --d3-03-acc2: #2247c9;
  --d3-03-acc2: oklch(48% 0.2 266);
}

@media (prefers-color-scheme: light) {
  .d3-03:has(.d3-03__theme-input:checked) {
    --d3-03-bg: #f4f1ea;
    --d3-03-surf: #ffffff;
    --d3-03-line: #ddd6c8;
    --d3-03-ink: #131722;
    --d3-03-mut: #5f6a80;
    --d3-03-acc: #a35c00;
    --d3-03-acc: oklch(56% 0.14 72);
    --d3-03-acc2: #2247c9;
    --d3-03-acc2: oklch(48% 0.2 266);
  }
}

@media (prefers-color-scheme: dark) {
  .d3-03:has(.d3-03__theme-input:checked) {
    --d3-03-bg: #f4f1ea;
    --d3-03-surf: #ffffff;
    --d3-03-line: #ddd6c8;
    --d3-03-ink: #131722;
    --d3-03-mut: #5f6a80;
    --d3-03-acc: #a35c00;
    --d3-03-acc: oklch(56% 0.14 72);
    --d3-03-acc2: #2247c9;
    --d3-03-acc2: oklch(48% 0.2 266);
  }
}

.d3-03__theme {
  position: absolute;
  inset-block-start: clamp(0.75rem, 3vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 20;
}

.d3-03__theme-input {
  position: absolute;
  opacity: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
}

.d3-03__theme-label {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--d3-03-line);
  border-radius: 999px;
  background: var(--d3-03-surf);
  color: var(--d3-03-ink);
  cursor: pointer;
}

.d3-03__theme-label svg {
  inline-size: 20px;
  block-size: 20px;
}

.d3-03__theme-input:focus-visible + .d3-03__theme-label {
  outline: 2px solid var(--d3-03-acc);
  outline-offset: 3px;
}

.d3-03__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-block-size: 100vh;
  padding: clamp(3.5rem, 9vw, 5rem) clamp(0.75rem, 4vw, 2.5rem);
}

.d3-03__viewport {
  inline-size: 100%;
  max-inline-size: 58rem;
  overflow: hidden;
  border: 1px solid var(--d3-03-line);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--d3-03-surf) 92%, transparent), color-mix(in oklab, var(--d3-03-bg) 88%, transparent));
  padding: clamp(1rem, 3.5vw, 2rem);
  display: grid;
  gap: clamp(0.9rem, 3vw, 1.5rem);
  box-shadow: 0 40px 90px -46px #000;
}

.d3-03__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.d3-03__kicker {
  display: block;
  font: 700 0.66rem/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d3-03-acc);
}

.d3-03__head strong {
  font: 700 clamp(1.6rem, 6vw, 3rem)/0.95 var(--d3-03-font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.d3-03__price {
  font: 700 clamp(1rem, 3vw, 1.4rem)/1 var(--d3-03-font-display);
  color: var(--d3-03-mut);
}

.d3-03__scene {
  perspective: 980px;
  perspective-origin: var(--d3-03-x) var(--d3-03-y);
  block-size: clamp(15rem, 44vw, 22rem);
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: radial-gradient(24rem 12rem at 50% 82%, color-mix(in oklab, var(--d3-03-acc) 18%, transparent), transparent 70%);
  cursor: grab;
  touch-action: none;
}

.d3-03__scene:active {
  cursor: grabbing;
}

.d3-03__object {
  position: relative;
  inline-size: clamp(10rem, 30vw, 15rem);
  block-size: clamp(10rem, 30vw, 15rem);
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-18deg);
}

.d3-03__speaker {
  position: absolute;
  inset: 6% 12% 22%;
  border-radius: 22px;
  background: linear-gradient(160deg, #23262e, #0d0f14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 60px -20px #000;
  transform: translateZ(46px);
  display: grid;
  place-items: center;
}

.d3-03__grille {
  position: absolute;
  inset: 12%;
  border-radius: 14px;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 7px 7px;
  color: rgba(255, 255, 255, 0.22);
}

.d3-03__ring {
  position: absolute;
  inline-size: 46%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 3px solid var(--d3-03-acc);
  box-shadow: 0 0 24px color-mix(in oklab, var(--d3-03-acc) 60%, transparent), inset 0 0 18px color-mix(in oklab, var(--d3-03-acc) 35%, transparent);
}

.d3-03__brand {
  position: absolute;
  inset-block-end: 8%;
  font: 700 0.66rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
}

.d3-03__plinth {
  position: absolute;
  inset-inline: 4%;
  inset-block-end: 8%;
  block-size: 18%;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--d3-03-acc2) 40%, #101425), #0a0e1a);
  transform: translateZ(16px);
  box-shadow: 0 20px 40px -16px #000;
}

.d3-03__shadow {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6%;
  block-size: 40%;
  transform: rotateX(90deg);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent 72%);
}

.d3-03__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.25rem);
  padding: clamp(0.7rem, 2.4vw, 1rem);
  border: 1px solid var(--d3-03-line);
  border-radius: 18px;
  background: color-mix(in oklab, var(--d3-03-surf) 80%, transparent);
}

.d3-03__pad {
  position: relative;
  inline-size: 72px;
  block-size: 52px;
  border-radius: 10px;
  border: 1px solid var(--d3-03-line);
  background-image: linear-gradient(color-mix(in oklab, var(--d3-03-mut) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--d3-03-mut) 30%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
}

.d3-03__cam {
  position: absolute;
  inset-block-start: var(--d3-03-y);
  inset-inline-start: var(--d3-03-x);
  inline-size: 12px;
  block-size: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  background: var(--d3-03-acc);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--d3-03-acc) 30%, transparent);
}

.d3-03__read {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.d3-03__read dt {
  font: 700 0.6rem/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d3-03-mut);
}

.d3-03__read dd {
  margin: 0;
  font: 600 clamp(0.78rem, 2.2vw, 0.95rem)/1.2 ui-monospace, Menlo, monospace;
  color: var(--d3-03-acc);
}

.d3-03__hint {
  grid-column: 1 / -1;
  margin: 0;
  font: 500 0.72rem/1.3 system-ui, sans-serif;
  color: var(--d3-03-mut);
}

@media (prefers-reduced-motion: reduce) {
  .d3-03__object {
    transform: rotateX(8deg) rotateY(-18deg);
  }
}
```

## JavaScript
```js
const root = document.querySelector('.d3-03');
const scene = root.querySelector('#d3-03-scene');
const out = root.querySelector('#d3-03-out');
let drag = false;
const move = (e) => {
  if (!drag) return;
  const r = scene.getBoundingClientRect();
  const x = Math.min(100, Math.max(0, ((e.clientX - r.left) / r.width) * 100));
  const y = Math.min(100, Math.max(0, ((e.clientY - r.top) / r.height) * 100));
  root.style.setProperty('--d3-03-x', x.toFixed(1) + '%');
  root.style.setProperty('--d3-03-y', y.toFixed(1) + '%');
  out.textContent = x.toFixed(0) + '% ' + y.toFixed(0) + '%';
};
const down = (e) => { drag = true; scene.setPointerCapture(e.pointerId); move(e); };
const up = () => { drag = false; };
scene.addEventListener('pointerdown', down);
scene.addEventListener('pointermove', move);
scene.addEventListener('pointerup', up);
scene.addEventListener('pointercancel', up);
root.__d3Cleanup = () => { scene.removeEventListener('pointerdown', down); scene.removeEventListener('pointermove', move); scene.removeEventListener('pointerup', up); scene.removeEventListener('pointercancel', up); };
```

How this works

perspective-origin is where you are standing; transform-origin is where the object pivots. They are easy to confuse because both take a position and both change the picture. Only one of them touches the object. Switch the camera to 10% 50% here and the slab does not move at all — you have walked to the left, so its right side comes into view and its left side closes up.

The default is 50% 50%, measured against the element that owns the perspective. Percentages resolve against that element's padding box, so a scene that gets taller changes what 50% 50% means. If you need the camera pinned regardless of layout, use lengths: perspective-origin: 240px 120px. This demo keeps percentages and animates them, which is the more common product case.

Moving the camera is often the fix for a scene that will not read. A rotated slab viewed dead centre hides its top face; lift the origin to 50% 15% and the top comes into view without adding a single degree of rotation. That is cheaper and more stable than rotating the geometry, because rotation changes an element's rendered bounding box and can push a page sideways at 320px, while the origin never does.

The trap: perspective-origin on the wrong element does nothing. It only has an effect on an element that also establishes a perspective — either through the perspective property or through perspective() in its own transform. Set it on the rotated child and it is inert. Set it on a grandparent that has no perspective and it is inert there too, which is the version that wastes an afternoon.

Make it yours

  • Add a sixth camera by copying one radio, its label and the matching :has() rule — each state is a two-line addition.
  • Swap the percentage origins for lengths if the scene must keep the same camera as its box changes size.
  • Change --d3-03-depth to widen the lens; a shorter depth makes each camera move far more dramatic.
  • Retune the transition-duration on .d3-03__scene for a slower dolly, or set it to 1ms for instant cuts.
  • Restyle the camera marker in .d3-03__marker — it is positioned from the same tokens as the origin, so it stays truthful.
  • Recolour by editing the two --d3-03-acc declarations, hex first then oklch.

Gotchas — read before shipping

  • perspective-origin on an element with no perspective is silently ignored. It must sit on the same element as perspective, or on the element whose transform contains perspective().
  • Percentage origins resolve against the perspective element's own box, so a responsive scene changes camera position as it resizes even though the CSS never changed.
  • Animating perspective-origin is not a compositor-only property in every engine — it can force re-projection each frame. Keep the scene small if you animate it, as this one does.
  • The controls stay outside the preserve-3d world on purpose. A radio inside the scene inherits the projection, and its 44px target can render well under 44px once perspective shrinks it.

Browser support

ChromeSafariFirefoxEdge
111+15.4+121+111+

oklch() and the :has() control wiring set the floor at Chrome 111 / Safari 15.4 / Firefox 121; perspective-origin itself has been Baseline since 2015 and contributes no floor at all. Without :has() the camera control stops switching and the scene renders in its default 50% 50% state, which is a correct composition rather than a broken one, and below the oklch() floor every token uses the sRGB hex declared first.

Techniques used in this demo

3D transforms (perspective + preserve-3d)MDN ↗aspect-ratioMDN ↗clip-pathMDN ↗:has()MDN ↗role="" (ARIA)MDN ↗radial-gradient()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →