I would like to have a non-linear skew on an element on my page, so the skew can be algorithmically modified on an element drag to replicate the look of "Wobbly Windows" on the web. Ideally I would like to use pure JS/CSS to accomplish this, but I am willing to use a library if necessary and if anyone has a good recommendation.
This is an example of what I would like to achieve:
From all the documentation I have read, this is currently not supported. Does anyone have any creative workarounds to offer to achieve the desired effect?
This is possible to do on an SVG (example) with the Warp.js library, but I need to apply it to a div, not an image. If there is a good way to map a div to an SVG while still keeping it interactive, that would work for my use case as well.