Javascript 单击时旋转字体真棒图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26173376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate Font Awesome Icon On Click
提问by rohit
I'm trying to make a Font Awesome chevron rotate 180o on click.
我正在尝试使 Font Awesome 雪佛龙在点击时旋转 180 度。
Here's the fiddle of JSFiddlethat has what I've tried so far. I also wanted it to spin around the center so I used this other thread.
这是JSFiddle的小提琴，它具有我迄今为止尝试过的功能。我还希望它围绕中心旋转，所以我使用了另一个线程。
HTML
HTML
<div class="fa fa-chevron-up"><a href="#">^</a></div>
CSS
CSS
.rotate {
-webkit-animation: spin1 2s linear;
-moz-animation: spin1 2s linear;
-o-animation: spin1 2s linear;
-ms-animation: spin1 2s linear;
animation: spin1 2s linear;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 256px;
height: 256px;
}
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(180deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(180deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(180deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(180deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(180deg);}
}
JS
JS
$(".fa-chevron-up").click(function(){
$(this).toggleClass("rotate") ;
})
回答by koala_dev
I believe it would be easier to do this with CSS transitions:
我相信使用 CSS 转换会更容易做到这一点：
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
jQuery
$(".rotate").click(function(){
$(this).toggleClass("down");
});
