How can I skew a SpriteRenderer in an animation to grow a side and decrease the opposite side by the same amount?

Question

I am interested in the maths and maybe the shader code. I am almost sure that this would be a great starting point but I do not have any knowledge about shaders and the language they are written in.

The little project is just an attempt to create a flippable sprite, like the one I did in WPF but more interesting because of the "closer" perception. The objective is to learn. I have two animations, one rotating around the Y axis and the other one is this skew that I do not know how to do.

On the web I have found old answers and answers that use Image instead of SpriteRenderer, some complex math that I cannot comprehend yet.

Ideally the animation would go through all these states, from left to right, and then in the inverse order, from right to left (blue means unflipped state, green means flipped state):

I have started working with Unity since less than a week and I have forgotten a lot of maths and geometry I learned in school. But I am eager to learn again.

Thank you.

Answer 1

Having 3 sprite renderers in the scene, with a script attached which makes them rotate around the Y axis of each of them, and the Main Camera selected, it is visible in the screenshot below that I changed the Projection property of the Camera component inside the Inspector pane to Perspective (it is written with blue Projection and in the right there is a combo box). This makes the animations work the way I asked in the question.

Below there is one of the game objects with sprite renderer selected and the Inspector pane shows the usage of the Player Script (source code below).

Script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerScript : MonoBehaviour
{
    private SpriteRenderer sr;
    public Color32 unflippedColor = new Color32(0, 255, 0, 255);
    public Color32 flippedColor = new Color32(0, 0, 255, 255);

    // Start is called before the first frame update
    void Start()
    {
        sr = GetComponent<SpriteRenderer>();
        StartCoroutine(FlipLoop());
    }

    private bool IsFlipped = false;

    bool isUnflippedAngle(float a)
    {
        return !(a <= 90 || (a >= 270 && a <= 360));
    }

    IEnumerator FlipLoop()
    {
        while (true)
        {
            float startAngle = transform.rotation.eulerAngles.y;
            float angle = Time.deltaTime * 15f;
            transform.Rotate(new Vector3(0, 1, 0), angle);
            float endAngle = transform.rotation.eulerAngles.y;

            if (isUnflippedAngle(endAngle))
            {
                sr.color = unflippedColor;
                IsFlipped = false;
            }
            else
            {
                sr.color = flippedColor;
                IsFlipped = true;
            }
            yield return new WaitForEndOfFrame();
        }
    }

    // Update is called once per frame
    void Update()
    {

    }
}

The sprite

Video screen capture

Thank you.