Css transform in jQuery

Question

I have img and I need to rotate it 90 degree when I click on it.

<img src="img/right-arrow.png" alt="" class="show">

when I use

.show {
transform: rotate(90deg); 
}

in Css file it works. but when I do it in jQuery it doesn't work. here is my code in jQuery

$('.show').click(function(){
    $(this).css("-webkit-transform" : "rotate(90deg)");
}
);

Jacques Marais · Accepted Answer · 2016-07-14 09:35:05Z

1

This is because you used a : in your function, use a comma instead:

$(this).css("-webkit-transform", "rotate(90deg)");

answered Jul 14, 2016 at 9:35

Jacques Marais

2,77619 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai T · Accepted Answer · 2016-07-14 09:44:08Z

1

see here jsfiddle

if you want to use : in your css in JQ you need to put the whole code between {}

like so :

$('.show').click(function(){
    $(this).css({"-webkit-transform" : "rotate(90deg)"});
}
);

OR if you don't want to use {} use , instead of : like so

$('.show').click(function(){
    $(this).css("-webkit-transform" , "rotate(90deg)");
}
);

answered Jul 14, 2016 at 9:44

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Comments

Tezekiel · Accepted Answer · 2016-07-14 09:36:35Z

0

Try this

$('.show').click(function(){
  $(this).css({
    '-moz-transform':'rotate(90deg)',
    '-webkit-transform':'rotate(90deg)',
    '-o-transform':'rotate(90deg)',
    '-ms-transform':'rotate(90deg)',
    'transform':'rotate(90deg)'
  });
});

answered Jul 14, 2016 at 9:36

Tezekiel

1531 silver badge7 bronze badges

Comments

Ivin Raj · Accepted Answer · 2016-07-14 09:51:18Z

0

try this one:

$('.show').click(function(){
    $(this).css({"-webkit-transform" : "rotate(90deg)"});
}
);

DEMO HERE

answered Jul 14, 2016 at 9:51

Ivin Raj

3,4312 gold badges34 silver badges70 bronze badges

Collectives™ on Stack Overflow

Css transform in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related