Is your feature request related to a problem? Please describe.

I would like to use the drag gesture to achieve a different animation than moving the target element. For example I would like to rotate it in 3D like a card while its being dragged.

Describe the solution you'd like

A possibility to map the x and y coordinates of the drag to a different property / motion value. A possible API could be this:

const x = useMotionValue(0);
const y = useMotionValue(0);'

<motion.div
      drag={{ x, y }}
      style={{
        rotateY: x,
        rotateX: y,
    }}
/>

With this API design this wouldn't be a breaking change, and if one wants to restore the dragging behavior simply use the motion values as the x or y fields in the style prop like:

const x = useMotionValue(0);
const y = useMotionValue(0);'

<motion.div
      drag={{ x, y }}
      style={{ x, y }}
/>

Describe alternatives you've considered

I achieved this by using:

const x = useMotionValue(0);
const transform = useMotionTemplate`rotateY(${x}deg)`;

<motion.div
    style={{
        x,
        transform,
    }}
    drag="x"
/>

But this has the drawback that I can't use any transform related fields in the style prop anymore, because they are overwritten by the transform field.

Also anime.js has a similar feature.