javascript - CSS Rotate Transform not Staying in new Position -

javascript - CSS Rotate Transform not Staying in new Position -

i trying should simple rotate transform on text using css transform , transition properties when element clicked however, rotation doesn't seem remain in new position.

the html follows:

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

i have css transition arrow set below:

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

i applying transform using jquery click function 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 extent. when element clicked span rotate, however, when gets 90 degrees, automatically snaps default state. no longer rotate on click, transform styles still attached element when inspecting in developer tools. missing something?

thanks in advance, aaron

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $('.accordion-btn').click(function(e) { e.preventdefault(); $('.arrowgreen').toggleclass('rotate90'); }); }); class="snippet-code-css lang-css prettyprint-override">.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); } class="snippet-code-html lang-html prettyprint-override"><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>

javascript jquery html css3 transform