CSS/React-Native StyleSheet - 在自定义轴上旋转

Question

所以我有一个在 z 轴上旋转 45 度的矩形。 我的问题是如何在 45 度轴上翻转这个元素？ 我知道有 rotateY 和 rotateX 但我似乎无法在这个 45 度上旋转。

我希望找到相关性，因为45 degree axis有点无关紧要。 从技术上讲，它是一个随机轴，我需要编写一个 function 来动态设置旋转值，但我还没有找到手动方法来做到这一点。 任何帮助表示赞赏

下面是我要旋转的实际元素。 目标是旋转是长边，而不是现在正在做的奇怪的事情。 下面也是我正在使用的样式表代码。 其他方法是从 react-native-reanimated 获取动画

  transform: [
    {
      rotateX: withRepeat(
        withSequence(
          withTiming(`${180}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
          withTiming(`${0}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
        ),
        -1,
        true,
      ),
    },
    {
      rotateY: withRepeat(
        withSequence(
          withTiming(`${180}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
          withTiming(`${0}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
        ),
        -1,
        true,
      ),
    },
    { rotate: `${rotate}deg` },

Answer 1

未经测试，但我认为是这样的，如果我没记错的话，你想在 z 轴上旋转，

transform: [
    {
      rotateX: withRepeat(
        withSequence(
          withTiming(`${180}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
          withTiming(`${0}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
        ),
        -1,
        true,
      ),
    },
    {
      rotateY: withRepeat(
        withSequence(
          withTiming(`${180}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
          withTiming(`${0}deg`, {
            duration: rotateDuration,
            easing: Easing.linear,
          }),
        ),
        -1,
        true,
      ),
    },
    // rotate on 45 degree angle
    {
        rotateZ: withRepeat(
            withSequence(
                withTiming(`${45}deg`, {
                    duration: rotateDuration,
                    easing: Easing.linear,
                }),
                withTiming(`${0}deg`, {
                    duration: rotateDuration,
                    easing: Easing.linear,
                }),
            ),
            -1,
            true,
        ),
    },
    ]