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点击函数来应用转换：

$(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");事件

上使用onClick()之类的内容

Answer 3

你原来的那个没有工作的原因是因为你的转换的if语句正在返回：

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

显然不匹配＆＃34;旋转（90）;＆＃34;

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

我认为@Cassian对你来说是最好的答案。

CSS旋转变换不会保持新的位置

3 个答案: