SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Okemos, Michigan, USA
    1 Post(s)
    0 Thread(s)

    Rotating with js or jQuery

    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
    Code JavaScript:
    $(document).ready(function() {
    					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:


    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Victoria, Australia
    28 Post(s)
    2 Thread(s)

    Can't be done without CSS3.
    Code css:
    #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);

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts