OnlineCBT
Give depth a viewing distance
3D transforms rotate or translate boxes in three dimensions. Perspective determines how depth appears: a smaller viewing distance produces a stronger perspective effect. A 3D visual should enhance a usable interface rather than hide information behind an interaction users cannot discover.
.scene { perspective: 800px; }
.card {
position: relative;
min-height: 12rem;
transform-style: preserve-3d;
transition: transform 250ms ease;
}
.card.is-flipped { transform: rotateY(180deg); }
.face { backface-visibility: hidden; }
.face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
.card { transition: none; }
}A real button or other accessible state control should toggle the is-flipped class. The scene supplies perspective, and preserve-3d retains the descendants' depth relationship. The back face is pre-rotated so it reads correctly after the card turns.
Visibility is not accessibility state
backface-visibility controls painting. It does not by itself guarantee that hidden-side links disappear from the tab sequence or accessibility tree. If the card has interactive content on both sides, manage focus and hidden state explicitly with the application's behavior layer.
Perspective placement
The perspective property on an ancestor gives descendants a shared viewing perspective. A perspective() transform function participates in that element's own transform list. Their composition is not identical, so test the intended scene rather than mixing both without a reason.
Flattening and clipping
Some ancestor properties can flatten the 3D rendering context. Overflow clipping and stacking contexts can also change the visible effect. Keep an isolated demo while debugging, then add surrounding styles one at a time.
Practice
- Compare perspective distances of 400px and 1200px.
- Operate the flip control with keyboard only.
- Verify that controls on the hidden side cannot trap focus.
- Provide a reduced-motion version that reveals the same information without a rotating animation.
