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

【问题标题】：CSS Rotate Transform not Staying in new PositionCSS 旋转变换不停留在新位置
【发布时间】：2014-10-08 10:44:26
【问题描述】：

我正在尝试在单击元素时使用 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 度时，它会自动恢复到默认状态。然后它将不再在单击时旋转，但是在开发人员工具中检查它时，变换样式仍然附加到元素上。我错过了什么吗？

提前致谢，亚伦

【问题讨论】：

标签： javascript jquery html css transform

【解决方案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>

【讨论】：

我试过了，效果很好。浮动不适用于我的设计，但是没有它，旋转仍会恢复为默认值。然后我尝试使跨度显示内联块（我相信浮动使它阻塞），这似乎已经修复了它。似乎不喜欢我能收集到的内联元素？
@AaronUmhoefer：哦，对不起。与“内联块”的跨度工作正常.. 抱歉。无论如何，让我也更改代码... :)

【解决方案2】：

在我看来，你应该做一个这样的 css 类

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

在onClick() 事件中使用$(".arrowGreen").toggleClass("rotate"); 之类的东西

【讨论】：

正是我所写的。我认为这绝对是最好的方法，也是最可维护和可重用的。
这更干净了，谢谢。这现在允许旋转在两个方向上工作，但是由于某种原因，初始旋转仍会快速恢复到默认状态。现在发生的情况：单击accordion-btn元素->箭头跨度旋转90度->旋转完成后，它会恢复到原始状态（-90度）->再次单击该元素，箭头会恢复到90度度角并从那里旋转回正常。 :S

【解决方案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 为您提供了最好的答案。

【讨论】：