Add support for "rotate" in `flip`

[MathiasWP]

Describe the problem

I'm trying to create the "tinder-swipe" effect in my app, and i'm using flip for achieving the animation of moving the cards. Everything works really nicely except for the rotation - which it seems like flip does not support:

export function flip(node, { from, to }, params = {}) {
    var style = getComputedStyle(node);
    var zoom = get_zoom(node); // https://drafts.csswg.org/css-viewport/#effective-zoom

    var transform = style.transform === 'none' ? '' : style.transform;
    var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
    var dsx = from.width / to.width;
    var dsy = from.height / to.height;

    var dx = (from.left + dsx * ox - (to.left + ox)) / zoom;
    var dy = (from.top + dsy * oy - (to.top + oy)) / zoom;
    var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;

    return {
        delay,
        duration: typeof duration === 'function' ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
        easing,
        css: (t, u) => {
            var x = u * dx;
            var y = u * dy;
            var sx = t + u * dsx;
            var sy = t + u * dsy;
            return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px);`; // <--- No rotation here
        }
    };
}

Describe the proposed solution

Support "rotate" in the flip directive

Importance

nice to have

[jessecoleman]

You can use a custom FLIP function, and write arbitrary css keyframes to handle any sort of transition you want. There's nothing privileged about the built-in flip function. I've implemented a custom flip to achieve the spring physics in my site https://gramjam.app