点击旋转字体真棒图标

我试图让Font Awesome V形旋转180º点击。

这是JSFiddle的小提琴，它具有我迄今为止所尝试过的function。 我也希望它围绕中心旋转，所以我使用了另一个线程 。

HTML

^ 

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

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

Answer 1

我相信使用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"); }); 

演示小提琴