feat: add transformPerspective prop and card flip demo#34
Merged
janicduplessis merged 2 commits intomainfrom Apr 8, 2026
Merged
feat: add transformPerspective prop and card flip demo#34janicduplessis merged 2 commits intomainfrom
janicduplessis merged 2 commits intomainfrom
Conversation
- Add `transformPerspective` prop for configurable 3D perspective on all platforms - iOS: use individual key-path animations for transform sub-properties, apply perspective to parent via didMoveToSuperview - Android: fix cameraDistance formula to match RN (density² × perspective × √5), add backface visibility updates during rotation animations - Web: add perspective() to CSS transform when 3D rotations are active, always include rotateX/rotateY in transform for correct CSS transitions - Add CardFlipDemo example with 3D card flip animation - Update default perspective from 850 to 1280 (matches RN default) - Document iOS caveat about Fabric view flattening
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
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.
Summary
Adds a
transformPerspectiveprop to control the 3D camera distance forrotateX/rotateYanimations, and a card flip demo showcasing it.Previously, perspective was hardcoded to 850 on iOS and Android, with no way to customize it and no perspective on web at all. The default is now 1280, matching React Native's own default, and the value is configurable per-view.
Platform-specific implementation:
CATransform3Dmodel transform. Transform animations use individual Core Animation key-paths (transform.rotation.y,transform.scale.x, etc.) instead of full-matrix interpolation to avoid the "fold" artifact on large rotations. For interrupted animations, "from" values are read from the presentation layer; for completed animations, old prop values are used as fallback since CA can't reliably decompose rotation angles from a matrix that also contains m34.density² × perspective × √5).backfaceVisibility: 'hidden'now works correctly —setBackfaceVisibilityDependantOpacity()is called on first mount and during rotation animations.perspective()CSS transform function is added when theanimateprop declaresrotateX/rotateY. Perspective and rotation are always included in the transform (even at 0°) so CSS transitions interpolate correctly between states.Test plan
backfaceVisibility: 'hidden'correctly hides the back face on all platformstransformPerspectivevalues (e.g. 400 for dramatic, 2000 for subtle)collapsable={false}for correct rendering