Rotating with js or jQuery

JavaScript
1

Hi guys,
I am trying to develop a web app and in that I want a div to be rotated if a particular image is hovered on. and I can not seem to do so in jQuery or JS and I was wondering if anyone can help me with some basic code that can accomplish that.

For the hover part, I have used jQuery and it looks like so

$(document).ready(function() {
		$("#hoverOnMe").hover(
					function () {
                                               /* The rotation code */		
					  },
					function () {
					      /* undo rotation */
					  });
				  });

The rotation would be difference angles depending on what images are hovered on, but for now how could I do a rotation of 180 degrees.

Is there a .rotate function or somethings like it?

The div that I want rotated has an id of #dial.
So could it be possible to write it like this:

$(“#dial”).rotate(180);

I would really appreciate any help with this because I have spent many hours today trying to achieve it.

Thanks in Advance & Best Regards,
Team 1504

2

Hi,

Can’t be done without CSS3.


#dial {
  -moz-transition: -moz-transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  transition: all 0.3s ease;
}
#dial:hover {
  -moz-transform: rotate(12deg) translate(-4px, -600px);
  -webkit-transform: rotate(12deg) translate(-4px, -600px);
  -o-transform: rotate(12deg) translate(-4px, -600px);
  transform: rotate(12deg) translate(-4px, -600px);
}