CSS Rotate Transform not Staying in new Position

Question

I am trying to do what should be a simple rotate transform on some text using the CSS transform and transition properties when an element is clicked however, the rotation doesn't seem to stay in its new position.

The HTML is as follows:

<div class="accordion-btn">
    <span class="arrowGreen">&gt;</span> <a href="#">Show help</a>
</div>

I have the CSS transition for the arrow set as below:

.arrowGreen {
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

I am then applying the transform using a jQuery click function like this:

$(document).ready(function () {
    $('.accordion-btn').click(function (e) {

    e.preventDefault();

    if ($(this).find('.arrowGreen').css('transform') != "rotate(90deg)")
    {
        $(this).find('.arrowGreen').css({ '-ms-transform': 'rotate(90deg)', '-moz-transform': 'rotate(90deg)', '-webkit-transform': 'rotate(90deg)', 'transform': 'rotate(90deg)' });
    }
    else
    {
        $(this).find('.arrowGreen').css({ '-ms-transform': 'rotate(-90deg)', '-moz-transform': 'rotate(-90deg)', '-webkit-transform': 'rotate(-90deg)', 'transform': 'rotate(-90deg)'});
    }
}

This works to an extent. When the element is clicked the span does rotate, however, when it gets to 90 degrees, it then automatically snaps back to its default state. It will then no longer rotate on click, however the transform styles are still attached to the element when inspecting it in developer tools. Am I missing something?

Thanks in advance, Aaron

Answer 1

 $(document).ready(function() { $('.accordion-btn').click(function(e) { e.preventDefault(); $('.arrowGreen').toggleClass('rotate90'); }); }); 

 .arrowGreen { -moz-transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; display: inline-block; } .rotate90 { -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="accordion-btn"> <span class="arrowGreen">&gt;</span> <a href="#">Show help</a> </div> 

Answer 2

In my oppinion you shoul make a css class like this

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

And use something like $(".arrowGreen").toggleClass("rotate"); on onClick() event

Answer 3

The reason why your old one wasn't working is because your if statement for the transform was returning:

[Log] matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0)  (08_10_14.html, line 34)

Which obviously doesn't match "rotate(90);"

You would of needed to do something as seen on: http://css-tricks.com/get-value-of-css-rotation-through-javascript/

I think @Cassian has the best answer for you though.