web-dev-qa-db-ja.com

クリック時にフォントの素晴らしいアイコンを回転させる

Font Awesomeシェブロンがクリック時に180度回転するようにしています。

ここに JSFiddle のフィドルがあります。これは私が今まで試したものです。また、中心の周りを回転させたいので、この他の thread を使用しました。

HTML

<div class="fa fa-chevron-up"><a href="#">^</a></div>

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")  ; 
})
javascriptjqueryhtmlcsscss3
29
rohit

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"); 
});

デモフィドル

74
koala_dev