All briefs Older briefs
Web Design & Frontend Daily Brief · June 13, 2026 · preview

3D View Transitions Get an Elegant Fix as Designers Rethink Their Craft for the AI Era

2 min read 3 sources Every claim cited

Today's brief pairs hands-on CSS technique with a bigger conversation about where design skill lives. On the layout side, a long-standing 3D view-transition bug finally has a one-line fix, while a 3-state system makes popover animations trivial. On the practice side, NN/g and UX Collective argue that critique, context architecture, and code literacy — not pixel-pushing — are the durable skills as probabilistic AI systems reshape the workflow.

CSS & Layout

  • Cross-document 3D view transitions silently flatten because the view-transition pseudo-element tree renders above the DOM in its own layer with no true parent, so the CSS perspective property — applied to a parent like html, :root, body, or even ::view-transition-group(root) — has nothing to act on and does nothing. The fix is to abandon the perspective property entirely and use the perspective() transform function instead, placed not in the ::view-transition-* pseudos but directly inside the @keyframes (e.g., transform: perspective(1100px) rotateY(-90deg)). Because perspective() is a per-element transform function rather than a parent-applied property, it works without requiring a parent, restoring the full 3D flip between pages. It's a small change that resolves an issue the author battled for weeks, and a practical pattern for anyone building cross-document transitions with @view-transition { navigation: auto; }. [5]
  • Part 2 of Frontend Masters' In-N-Out Animations series applies a reusable 3-2-1 system to the popover API, proving the same approach used for <dialog> transfers cleanly to other elements. The trick is styling all three states in order — :not(:popover-open), :popover-open, and an @starting-style block — so the 'on the way in' rules have enough specificity to win, while transitioning display and overlay with allow-discrete keeps the element animating as it changes from display: none to block. It demonstrates animating opacity and rotate together, and respects users via a prefers-reduced-motion: reduce block that strips the rotation but keeps the opacity fade. It also flags a Safari quirk where popovers lose their implied positioning anchor on the way out, fixed by setting the anchor explicitly (mirroring the inset: 0 dialog fix from Part 1). [4]

UX & Accessibility

  • NN/g argues that the core design skill in the AI era is critique: because generative systems are nondeterministic — the same input can yield different outputs — designers can no longer write exact specs and expect engineers to implement them verbatim. Instead, the job shifts to defining what 'good' looks like through a 'judge-evaluate-iterate' loop: specify objective judging criteria, evaluate actual outputs against them, then iterate the implementation. The piece stresses making criteria objective but not arbitrary (e.g., classifying responses by type, then judging each type) and notes the 'LLM as a judge' pattern can be calibrated against human annotations, measured by F1 score. The caveat: this works well for text/conversational systems but is harder for visual experiences, where evaluation tooling like accessibility scanners and design-system linters still needs to mature. [2]
2 more stories in today's full brief

Every claim cited to its primary source.

Log inCreate free account

Sources

  1. 2Nielsen Norman Group · 2026-06-12 — The Core Skill of Design in the AI Era: Critique
  2. 4Frontend Masters · 2026-06-12 — In-N-Out Animations: Popovers (Part 2/3)
  3. 5CSS-Tricks · 2026-06-12 — Why Isn’t My 3D View Transition Working?