CSS旋转变换不停留在新位置

Question

我正在尝试在单击元素时使用CSS转换和过渡属性对某些文本执行简单的旋转转换，但是旋转似乎并没有停留在新位置。

HTML如下：

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

我为箭头设置了CSS过渡，如下所示：

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

然后，我使用这样的jQuery click函数应用转换：

$(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)'});
    }
}

这在一定程度上起作用。 单击该元素时，跨度会旋转，但是，当跨度达到90度时，它将自动捕捉回其默认状态。 这样，它将不再在单击时旋转，但是在开发人员工具中检查元素时，变换样式仍会附加到该元素上。 我想念什么吗？

在此先感谢亚伦

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

在我看来，您应该像这样制作一个CSS类

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

并使用$(".arrowGreen").toggleClass("rotate"); on onClick()事件

Answer 3

您的旧版本不起作用的原因是，您的if语句正在返回：

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

显然与“ rotate（90）;”不匹配

您需要执行以下操作： http : //css-tricks.com/get-value-of-css-rotation-through-javascript-

我认为@Cassian为您提供最佳答案。