Phase 4 Step 2: CSS transforms

[thomasnemer]

Parent: #41

Goal

Implement CSS transforms so that elements can be translated, rotated, scaled, and skewed in 2D and 3D space.

Prerequisites

• Step 1 (CSS Grid) — both features create stacking contexts, coordinate on that infrastructure

Implementation

• Parse transform functions: translate(), translateX/Y/Z(), translate3d(), rotate(), rotateX/Y/Z(), rotate3d(), scale(), scaleX/Y/Z(), scale3d(), skew(), skewX/Y(), matrix(), matrix3d(), perspective()
• Parse related properties: transform-origin, transform-style, perspective, backface-visibility
• Compute final 4x4 transformation matrix at style resolution time
• Add transform_matrix field to LayoutBox; transformed boxes create new stacking contexts
• Apply transform as per-box uniform in wgpu vertex shader
• Transforms do not affect document flow but do affect hit testing and overflow calculations
• Animated transforms integrate with Phase 3 transition/animation infrastructure

Tests

• Parsing tests for all transform functions and related properties
• Matrix composition tests (multiple transforms → single 4x4 matrix)
• Stacking context creation tests
• Hit testing through transformed elements
• Visual regression tests for 2D and 3D transforms

Acceptance Criteria

• All CSS transform functions parse and compute correctly
• Transforms render correctly via wgpu vertex shader
• Hit testing accounts for transforms
• Transforms compose with transitions/animations from Phase 3