我正在嘗試放置一些元素，就好像它們是圍繞著一個圓，我得到了一些意想不到的行為應用translateZ到我的幀運動的元素。

如果我使用模板文字應用樣式，而不是使用framer motion的轉換簡寫，我會得到預期的效果，如下所示:

transform: `
  rotateY(${
    i * (360 / images.length) <= 180 ? 
    i * (360 / images.length) : 
    ((i - (images.length)) * (360 / images.length))
  }deg) 
  translateZ(300px)
`

但是如果我用幀運動速記來應用它們，我會得到一個不同的結果，就像這樣:

rotateY: 
  i * (360 / images.length) <= 180 ?
  i * (360 / images.length) : 
  ((i - (images.length)) * (360 / images.length)),
translateZ: '300px',

此外，如果我使用framer motion的簡寫方式僅應用rotateY，它也會添加translateZ(0px)。如果您嘗試設置自己的translateZ，它會像這樣以內聯方式呈現這兩種樣式:

translateZ(300px) rotateY(-45deg) translateZ(0px);

這里是Codesandbox。您可以嘗試在兩個轉換樣式塊中的一個中添加注釋，以查看不同的結果。

首先，您必須將translateZ設置為z prop，如代碼的這個分支所示，在該示例中，它只在translateZ轉換一次后才正確設置

https://code sandbox . io/s/framer-motion-unexpected-translate-z-behavior-forked-y 44 wps？file=/src/App.js

但是要使效果生效，首先必須應用旋轉，然后再應用變換，因為定義的順序在變換屬性中很重要

https://developer . Mozilla . org/en-US/docs/Web/CSS/transform # transform _ order

我認為這是一個制憲者的動議問題，他們已經設定了具體的轉變順序:

https://github . com/framer/motion/blob/ea 955 e0f 22971 f 6 c 6 CB 3784 b 47 E8 a 709 DC 53 BDD 4/packages/framer-motion/src/render/html/utils/transform . ts # L11

所以，我認為你可以使用幀運動屬性，但是要弄清楚如何使用幀運動變換順序來復制相同的效果