I'm trying to make an image for a website, that rotates with the mouse position, but I can't get it to work, I'm hoping someone could explain to me why.Here's the script I have:\[code\]<body background="images/x.jpg"><div id="container"><div id="html1" style="position:absolute; overflow:hidden; left:480px; top:180px; width:500px; height:500px; z-index:0"><div class="content"><img class="Circ" src="http://stackoverflow.com/questions/12791296/images/img.png" style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);"><script type="text/javascript">var img = $('.Circ');if(img.length > 0){var offset = img.offset();function mouse(evt){ var center_x = (offset.left) + (img.width()/2); var center_y = (offset.top) + (img.height()/2); var mouse_x = evt.pageX; var mouse_y = evt.pageY; var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); var degree = (radians * (180 / Math.PI) * -1) + 90; img.css('-moz-transform', 'rotate('+degree+'deg)'); img.css('-webkit-transform', 'rotate('+degree+'deg)'); img.css('-o-transform', 'rotate('+degree+'deg)'); img.css('-ms-transform', 'rotate('+degree+'deg)');}$(document).mousemove(mouse);}</script></div></div></div></body></html>\[/code\]Got the script from : http://metatroid.com/articles
Image rotating on a webpage with Javascript doesn't work
- Thread starter oshi
- Start date