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` },

Just to be clear, when you say the rectangle is rotated 45 degrees, is that about the Z axis? — A Haworth, Sep 05 '22 at 22:42

score 0 · Answer 1 · answered Sep 05 '22 at 22:44

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

This didn't work but it looks better than it did before. Seems like a good place to dig though — Bobby Gagnon, Sep 05 '22 at 22:46

CSS/React-Native StyleSheet - Rotate on custom axis

1 Answers1