0

This is what I want to achieve:

https://i.stack.imgur.com/O3rRl.png

The problem with the transform() function is that it keeps the ratio between the sides of the image and cant skew the corners independently.

This is what I have in mind: 

function draw(a,b,c,d,img) {
    //witchcraft goes here
}

where a,b,c,d are the corners and img is the image. The function draws the image in the polygon that the corners create.

R. Eckt
  • 9
  • 2
  • can you post what you have tried? have you looked at CSS 3 transformations? – Keagz93 Oct 11 '17 at 12:49
  • 1
    https://jsfiddle.net/z1eq3kst/ I've played around with the transform parameters and there's no way (to my knowledge) to manipulate rectangles so that the sides break their parallel relationship. I will look into CSS 3 transformations – R. Eckt Oct 11 '17 at 13:04
  • This is basically what 3D renderers do. Maybe you could look into WebGL? – Wazner Oct 11 '17 at 13:51

0 Answers0