-4

I remember seeing a codepen or a fiddle of this effect a while back.

I'm looking to build a small js feature that would track the direction of the mouse movement and transform a css card-like element in 3d space so that it looks like it's being dragged. So if I move my mouse towards the top right it would sort of push down on the top right of the card and and lift the bottom left towards the viewer.

What's an easy way to do this in javascript?

T J
  • 42,762
  • 13
  • 83
  • 138
Harry
  • 52,711
  • 71
  • 177
  • 261
  • Something a bit like this: https://github.com/404 ? – Robbie Wxyz Oct 10 '15 at 20:54
  • @SuperScript no that's parallax, the movement I'm talking about is in 3d using css perspective. – Harry Oct 14 '15 at 15:58
  • 3
    Yes, tracking mousemovement with event handlers and dynamically setting CSS 3D styles is an easy and good way. Go for it! Please show us your code attempts if you need further help. – Bergi Oct 14 '15 at 16:02
  • I think you might want to achieve something like the first link? [stackoverflow rotate3d question](http://stackoverflow.com/questions/33100813/how-to-make-smooth-rotate3d-mouse-hover/). This has some useful code also: [chill the lion codepen](https://codepen.io/Yakudoo/pen/YXxmYR) – ezattilabatyi Oct 15 '15 at 21:32
  • @shirfy Yep exactly, sweet thanks! If you post the link as the answer I will reward you the bounty. – Harry Oct 16 '15 at 03:15

1 Answers1

1

This stackoverflow question has mostly what you need.

But you can check out the chill the lion codepen too, it's using

requestAnimationFrame(loop);

which is a nice solution.

Community
  • 1
  • 1
ezattilabatyi
  • 357
  • 1
  • 2
  • 11