0

I'm a complete newbie when it comes to Javascript and canvases and stuff but I have this image (1920x1080) and what I want to do is when someone hovers over the image it tilts.

So if I move my mouse to the top of my image then it would look like the bottom of the image was coming out towards me and the top was going into the document. And if I move the mouse to the right the left side comes out a bit and the right side goes into the document.

Like this, http://www.simpleviewer.net/tiltviewer/app/ just more subtle and not in Flash.

This example is done with JavaScript but I don't know how, and I can't fully read the source and I don't want to rip out the source code http://mrdoob.com/97/depth_of_field

I have no idea where to start or even how to start, I'm just diving into the more advanced section of Javascript right now so any help/advice would be greatly appreciated.

Andreas
  • 355
  • 1
  • 4
  • 13

1 Answers1

0

This is a demo I just made. You can change the value in there.

-webkit-transform:  skewX(30deg);

to 40 deg

try hover to the cat image.

http://jsfiddle.net/B8FSb/

Basically you need to understand css transition and css transformation to able to do the demo app you mention.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

wizztjh
  • 6,979
  • 6
  • 58
  • 92