Adding perspective to projection transform

motiondivision · Apr 9, 2024 · e51db06 · e51db06
1 parent a972cf9
commit e51db06
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [11.0.26] 2024-04-10
+
+### Fixed
+
+-   Adding `perspective()` to projection transform.
+
 ## [11.0.25] 2024-04-03
 
 ### Fixed

diff --git a/packages/framer-motion/src/projection/styles/transform.ts b/packages/framer-motion/src/projection/styles/transform.ts
@@ -30,7 +30,10 @@ export function buildProjectionTransform(
     }
 
     if (latestTransform) {
-        const { rotate, rotateX, rotateY, skewX, skewY } = latestTransform
+        const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } =
+            latestTransform
+        if (transformPerspective)
+            transform = `perspective(${transformPerspective}px) ${transform}`
         if (rotate) transform += `rotate(${rotate}deg) `
         if (rotateX) transform += `rotateX(${rotateX}deg) `
         if (rotateY) transform += `rotateY(${rotateY}deg) `