feat: 3D and 2D CSS transform matrix integration

[MatiPl01]

Summary

This PR finally adds the integration of 2D and 3D transform matrix in transforms interpolation. The 2D matrix is used when possible to optimize interpolation. If the user uses a transformation that requires a 3D space (like x, y rotation or perspective), the 3D matrix is used instead. 2D transform matrix is automatically converted to the 3D transform matrix when needed.

Test plan

Code snippet

import { useState } from 'react';
import type { ViewStyle } from 'react-native';
import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated';

import { Button, Screen } from '@/apps/css/components';

const transitionStyles: Array<ViewStyle> = [
  {
    transform: [{ rotate: '45deg' }, { skewX: '45deg' }],
  },
  {
    transform: [{ translateY: 200 }, { rotate: '45deg' }, { scale: 2 }],
  },
  {
    transform: [{ rotate: '45deg' }, { translateY: 150 }],
    width: 200,
  },
];

export default function Playground() {
  const [state, setState] = useState(0);
  const stateToStyle = (num: number) => {
    return transitionStyles[num % transitionStyles.length];
  };

  return (
    <Screen>
      <View style={styles.container}>
        <Button
          title="Change state"
          onPress={() => {
            setState(state + 1);
          }}
        />
        <Animated.View
          style={[
            {
              backgroundColor: 'red',
              height: 65,
              marginTop: 60,
              transitionDuration: '0.5s',
              width: 65,
            },
            stateToStyle(state),
          ]}
        />
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
});