css matrix3d, drag the element while maintaining distortion

Asked

Viewed 95 times

3

I’ve been playing with css Matrix3d in this code: http://jsfiddle.net/88Lv8kfp

Now I wanted a stitch in the middle to drag the element keeping the distortion, but I don’t know how to do.

So far, the only thing I got was to add a dot in the middle with jQuery, but I don’t know how to update its position.

$ ('<div>'). addClass ("pontos centrais")
  .appendTo ('body'). posição ({
    meu: "center",
    em: "center",
    de: elemento
  });

http://jsfiddle.net/88Lv8kfp/1/

javascript jquery css html5

  • I don’t have time to keep looking at the code now but I find the question interesting. Changing the element that will receive the points body for element you can drag everything together like this: http://jsfiddle.net/vkwru7dm/ The problem I haven’t had time to solve is to rearrange the math for the transformation after the reference change. I’ll take another look when I can.

  • Did you write this code or take it from somewhere? If so, from where? A little documentation of the code would help.

  • Thanks @Sergio, you’re on the right track but the points should not distort.

  • @bfavaretto have some info here http://franklinta.com/2014/09/computing-css-matrix3d-transforms/

  • Solved your problem?

  • No, I haven’t solved it the way I wanted to. I provisionally solved the problem with something similar to @Sergio suggested.

Show 1 more comment

1 answer

0

You can use jQuery UI with the function .draggable().

Using $('.box').draggable(); you can move the box and keep the distortion. You would only have to make the circles follow the movement along with the box.

  • Yes, I came up with a solution like this but it’s a temporary solution because the central point is in the center of the div ". box" and not in the center of the element where I apply the distortion

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.