CSS/React-Native StyleSheet - Rotate on custom axis

Question

So I have a rectangle that is rotated on the z-axis at 45 degrees. My question is how do I flip this element on the 45-degree axis? I understand there is rotateY and rotateX but I can't seem to rotate on this 45-degree.

I was hoping to find the correlation as the 45 degree axis is kind of irrelevant. It's technically a random axis that I'd need to write a function to set the rotation values dynamically but I haven't been able to find a manual way to do this yet. Any help is appreciated

Below is the actually element I'm trying to rotate. The goal is to rotate is on the long side instead of the weird thing it's doing now. Below is also the stylesheet code that I'm using. The other methods are from react-native-reanimated to get the animations

  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

Untested but I think something like this, you want to rotate on the z-axis if I'm not mistaken,

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,
        ),
    },
    ]