jQuery CSS3 Transforms not Working to Rotate a DiV

Question

I am trying to rotate a soan class called .arrow on mouseenter event to 90 degree. This is easily possible with CSS3 transformation as:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

I tried to use same code in jquery but it is not working! Can you please let me what is wrong with my code?

$( document ).ready(function() {
   $(".list").on("mouseenter", function() {
      $( '.arrow' ).css({'background-position':'0px 0px',
                         '-webkit-transform': 'rotate(90deg)',
                         '-moz-transform': 'rotate(90deg)',
                         '-o-transform': 'rotate(90deg)',
                         '-ms-transform':'rotate(90deg)',
                         'transform': 'rotate(90deg)'
      });
    });
 });

UPDATE

Here is the JSFIDDLE Link

and code is like

<div class="list"></div>
<p>
<div class="arrow"></div>

$( document ).ready(function() {
   $(".list").on("mouseenter", function() {
       $( '.arrow' ).css({'background-position':'0px 0px',
                          ' -webkit-transform': 'rotate(90deg)',
                           '-moz-transform': 'rotate(90deg)',
                           '-o-transform': 'rotate(90deg)',
                           '-ms-transform':'rotate(90deg)',
                            'transform': 'rotate(90deg)'
                         });

   }).on("mouseleave", function() {
     $( '.arrow' ).css({'  -webkit-transform': 'rotate(-90deg)',
                           '-moz-transform': 'rotate(-90deg)',
                           '-o-transform': 'rotate(-90deg)',
                           '-ms-transform':'rotate(-90deg)',
                           'transform': 'rotate(-90deg)'
    });
}); 
});

IMPORTANT the code rotate without using the second part of the code. I mean the .on("mouseleave" part if you delete that part first part of code rotates the box!

If you inspect the .arrow element(s) do you see any updated HTML? Otherwise are you getting an error in your JS console? Also, you can use addClass() to add a class to the element instead, and then you setup CSS for the class that has your rotation transform. — Jasper
– Jasper, Commented Sep 26, 2013 at 22:21
Hi I updated the code and add a new jsfiddle link above, thanks — Mona Coder
– Mona Coder, Commented Sep 26, 2013 at 22:50
If you put in "0" on mouseleave css, it sets itself back to starting position. (tested firefox) Is that what you want? jsfiddle.net/wqQ8p/1 — Daniel
– Daniel, Commented Sep 26, 2013 at 23:03
You have spaces in your webkit version, so it fails in Chrome. Maybe that's the only problem. — Dave
– Dave, Commented Sep 26, 2013 at 23:26

avrahamcool · Accepted Answer · 2013-09-26 23:41:09Z

Pure CSS solution

You don't need to use a script for that, use CSS hover pseudo selector instead.

Check out this Working Fiddle

much simpler, cleaner, and easier to understand.

HTML: (nothing new here)

<div class="list"></div>
<p>
<div class="arrow"></div>

CSS:

.list
{
    width:150px;
    height:150px;  
    background-color:red;
}

.arrow{
    width:250px;
    height:350px; 
    background-color:blue;
}

.list:hover ~ .arrow
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Script

If you have to use a Script, use .hover(). the hover function takes two arguments,

first argument: function for mouse in

second argument: function for mouse out. again, this will be cleaner and easier to understand.

and finally: why is your code not working? because the rotation is applied on the initial position of the element, so rotate(90) and rotate(-90) are pretty much the same (at least for for rectangles). if you want it to go back to normal when the mouse leaves, you'll have to apply rotate(0) Check out this Working Fiddle (this is your old code, I really recommend you to use the CSS way, or that way)

also: notice the whitespace you had before webkit.

Collectives™ on Stack Overflow

jQuery CSS3 Transforms not Working to Rotate a DiV

1 Answer 1

Pure CSS solution

Script

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Pure CSS solution

Script

Comments

Your Answer

Sign up or log in

Post as a guest

Related