Question

Usually when an image is being resized in javascript or css3(using background-size), it will stretch an image from the center point. I need an image to be stretched and distorted from a single point that could be anywhere. It’s going to be dynamic so I don’t want to resort to using separate images.

Here’s a pic that illustrates what I mean:

Hopefully there’s an answer out there!

Answer 1

You have a few options to achieve this effect.

The “correct” way would be to use canvas to draw the image: Skewing images individually using canvas

Another way would be to fake the effect using the CSS transform skew.
http://developerdrive.com/demo/skewing_elements/skewing_elements.html

You would do this inside an element with “overflow: hidden” to make it look like a background image.