Trying to position elements in a circular layout has led to unexpected behavior when using framer motion's translateZ. By applying styles with a template literal without shorthand for transforms, the desired effect is achieved:
transform: `
rotateY(${
i * (360 / images.length) <= 180 ?
i * (360 / images.length) :
((i - (images.length)) * (360 / images.length))
}deg)
translateZ(300px)
`
However, using framer motion shorthand produces a different result:
rotateY:
i * (360 / images.length) <= 180 ?
i * (360 / images.length) :
((i - (images.length)) * (360 / images.length)),
translateZ: '300px',
In addition, applying only a rotateY using framer motion shorthand automatically includes a translateZ(0px). Attempting to set a custom translateZ will render both styles inline:
translateZ(300px) rotateY(-45deg) translateZ(0px);
Explore this Codesandbox link. You can experiment by commenting out one of the transform style blocks to observe the differing outcomes.