jQuery on click css3 rotation

Question

I need to get an image to rotate having its transform origin at 50% 50%. is the following correct? It does not seem to work for me.

        function slideUp_Menu(){
                    $('.main_nav').slideUp('slow', function(){
                        $("#arrow_up").css({ "-webkit-transform": "rotate(180deg)" });
                        $("#arrow_up").css( "-webkit-transform-origin", "50% 50%");
                    });// $('.tab_wrapper').animate({ marginTop: '193px' }, 500, 'linear');
        }

dahliacreative · Accepted Answer · 2012-12-14 15:08:29Z

2

I would add the transitions to your class in css eg:

transition: transform 1s ease;

then create another class and in there set the transform eg:

transform: rotate(10deg);

Then I would use jquery to add/remove the class eg:

$(document).on('click', 'selector', function() {
 $(this).addClass('class with transform');
});

Remember to include all the browser prefixes in your css selectors.

Js fiddle: http://jsfiddle.net/FhXj6/

edited Dec 14, 2012 at 15:08

answered Dec 14, 2012 at 15:00

dahliacreative

4413 silver badges14 bronze badges

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

Comments

Talha Akbar · Accepted Answer · 2012-12-14 14:48:29Z

0

no man its not correct and its for webkit supporting browsers!

    function slideUp_Menu(){
                $('.main_nav').slideUp('slow', function(){
                    $("#arrow_up").css({ "-moz-transform": "rotate(180deg)" });
                    $("#arrow_up").css( "-moz-transform-origin", "50% 50%");
                    $("#arrow_up").css({ "-webkit-transform": "rotate(180deg)" });
                    $("#arrow_up").css( "-webkit-transform-origin", "50% 50%");
                    $("#arrow_up").css({ "transform": "rotate(180deg)" });
                    $("#arrow_up").css( "transform-origin", "50% 50%");
                });// $('.tab_wrapper').animate({ marginTop: '193px' }, 500, 'linear');
    }

answered Dec 14, 2012 at 14:48

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Comments

Eirinn · Accepted Answer · 2012-12-14 14:55:36Z

0

You could probably do it with jQuery but I'd recommend using Greensock for animations:

https://www.greensock.com/gsap-js/

the performance is far better and stuff like rotating is a breeze. Use .get(0) at the end of your selector and jQuery is a fine partner :)

TweenMax.to($("#arrow_up").get(0), {css:{rotation:180}});

If you want transform origin look here:

https://www.greensock.com/get-started-js/
"transformOrigin – Sets the origin around which all transforms occur. By default, it is in the center of the element ("50% 50%")."

answered Dec 14, 2012 at 14:55

Eirinn

8361 gold badge10 silver badges23 bronze badges

1 Comment

Philip Bulley Over a year ago

You don't even need to .get(0), TweenMax accepts jQuery wrapped objects / selections.

Collectives™ on Stack Overflow

jQuery on click css3 rotation

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related