Keep rotateZ on elements with a layout animation

The projection pipeline handled rotate, rotateX and rotateY but not
rotateZ, so a layout or shared layout animation silently dropped it from
the generated transform and never mixed it between lead and follow.
This commit is contained in:
dualfroz committed 2026-09-11 23:06:36 +02:00
1 parent 1ba1c99cc1
commit 2e01f31175
7 files changed
+83

No files matched your search

@@ -102,4 +102,35 @@ describe("buildProjectionTransform", () => {
buildProjectionTransform(delta, { x: 1, y: 1 }, { rotate: 10 })
).toEqual("translate3d(100px, 100px, 0px) rotate(10deg) scale(2, 4)")
})
it("Applies rotateZ", () => {
const delta = {
x: {
translate: 100,
scale: 2,
origin: 0.5,
originPoint: 100,
},
y: {
translate: 100,
scale: 4,
origin: 0.5,
originPoint: 100,
},
}
expect(
buildProjectionTransform(delta, { x: 1, y: 1 }, { rotateZ: 10 })
).toEqual("translate3d(100px, 100px, 0px) rotateZ(10deg) scale(2, 4)")
expect(
buildProjectionTransform(
delta,
{ x: 1, y: 1 },
{ rotate: 45, rotateX: 20, rotateY: 30, rotateZ: 10 }
)
).toEqual(
"translate3d(100px, 100px, 0px) rotate(45deg) rotateX(20deg) rotateY(30deg) rotateZ(10deg) scale(2, 4)"
)
})
})
@@ -36,6 +36,7 @@ export function buildProjectionTransform(
pathRotation,
rotateX,
rotateY,
rotateZ,
skewX,
skewY,
} = latestTransform
@@ -46,6 +47,7 @@ export function buildProjectionTransform(
if (pathRotation) transform += `rotate(${pathRotation}deg) `
if (rotateX) transform += `rotateX(${rotateX}deg) `
if (rotateY) transform += `rotateY(${rotateY}deg) `
if (rotateZ) transform += `rotateZ(${rotateZ}deg) `
if (skewX) transform += `skewX(${skewX}deg) `
if (skewY) transform += `skewY(${skewY}deg) `
}