transform-style:preserve-3d — 3D scenes on desktop + mobile - #15
Merged
Merged
Conversation
A `transform-style: preserve-3d` container now renders its children as a real 3D scene instead of flattening to one quad: - Paint3DScene (core) composes each child's 4×4 transform with the container's, projects the child's quad through the active `perspective` (vanishing point at perspective-origin), z-sorts the planes back-to- front and backface-culls (screen-winding flip) faces with `backface-visibility:hidden`. Each face is rasterised flat then warped onto its projected quad via the existing BeginLayer/EndLayer3D contract. - The `perspective`/`perspective-origin` properties and `transform-style`/`backface-visibility` are parsed; the perspective context is threaded through the paint recursion. - **Mobile:** implemented `EndLayer3D` on the pure-Pascal raster canvas (compositor `WarpQuad` → premultiplied warp → `BlendPixel` composite), so 3D scenes render on Android (and the raster golden path), matching the Cocoa/iOS shells. Linux X11 has no CTM, so 3D stays flat there. - @supports now reports perspective / transform-style / 3D transforms as supported (dropped two stale "not projected" checks). Card-flip (front/back + backface cull) and a 6-face cube verified pixel-matching headless Chrome. Reftest css-preserve3d-flip (0.00%), raster golden preserve3d (0.00%, the Android path). DOM, compliance 216/216, raster 11/11, interaction, leak-clean over 30 cycles. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds
transform-style: preserve-3d(per request: desktop and mobile).What it does
A preserve-3d container renders its children as a real 3D scene instead of flattening to one quad.
Paint3DScene(core) composes each child's 4×4 transform with the container's, projects the child's quad through the activeperspective(vanishing point atperspective-origin), z-sorts back-to-front, and backface-culls (backface-visibility:hidden, via screen-winding flip). Each face is rasterised flat then warped onto its projected quad through the existingBeginLayer/EndLayer3Dcontract.perspective/perspective-originandtransform-style/backface-visibilityare parsed; the perspective context is threaded through the paint recursion.Mobile
The base
EndLayer3Dis a no-op and Android renders via the pure-Pascal raster canvas — so I implementedEndLayer3Dthere (compositorWarpQuad→ premultiplied warp →BlendPixel). 3D scenes now render on iOS + Android as well as macOS/Windows. Linux X11 has no CTM, so 3D stays flat there (documented). iOS + Android cross-compiles green.Verification (pixel-matching headless Chrome)
css-preserve3d-flip0.00%; raster goldenpreserve3d0.00% (the Android path).Coverage now 134 ✅ · 3 🟡 · 0 📦 · 0 ❌ — zero parsed-only/missing properties remain.
🤖 Generated with Claude Code