Search code examples
imagecross-browsertransformperspective

Add perspective to image in web

I have a squared formed image. I need to add perspective view to it and then make an animation that will restore image back to square view. This actions must work at least in all newest versions of browsers and without Flash.

This is what I need to make

I have tried to do this as follows:

  1. Using RaphaelJS I can only clip image (create path and set fill to image url), not add perspective.
  2. Canvas works as svg and vml in RaphaelJS... I can't add perspective with it's help.
  3. CSS3 3D animation method rotateX adds perspective, but it is supported only by Chrome and Safary.
Solution

  • There is no way to add perspective to image using built in tools.

    The only possible solution, I have found is using SVG add clip path to image - it doesn't add perspective view, but it's the best possible solution.

    As I understand - we can use Canvas to add perspective, but you must write your own javascript algorithm to transform plain image to perspective view.