Javascript 单击可旋转字体图标

我正试着做一个字体可怕的V形旋转180º点击

这是我到目前为止尝试过的东西。我还想让它绕着中心旋转，所以我用了另一个

HTML

JS

---

我相信使用CSS转换更容易做到这一点：

CSS

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

.rotate.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery

$(".rotate").click(function(){
    $(this).toggleClass("down"); 
});

---

那么你有什么问题吗？当你点击小提琴中的链接时，它不会触发JS或执行小提琴中缺少的任何动作。它在那里工作很好谢谢@kellycode。你知道有没有办法让它在同一个位置旋转180º，并一直保持这种状态，直到用户再次单击它时，它恢复到原始状态？+1如果列出所有可能的前缀，就可以避免转换

all

-ms transform

也可以为IE9添加，尽管它不会转换（因为它不受支持）。非常有用，试着想想如果不添加：display:block或display:inline block，有时转换不起作用非常有用！仅使用vanilla JS而不是document.queryselectoral（'.rotate'）.forEach（i=>{i.addEventListener（'click'，（）=>{i.classList.toggle（“down”）；}）；

$(".fa-chevron-up").click(function(){
 $(this).toggleClass("rotate")  ; 
})

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

.rotate.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

$(".rotate").click(function(){
    $(this).toggleClass("down"); 
});