SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    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() {
    		$("#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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    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

Bookmarks

Posting Permissions

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