Girar Icono De Fuente Impresionante Al Hacer Clic

Question

Girar Icono De Fuente Impresionante Al Hacer Clic

Estoy tratando de hacer una fuente chevron impresionante girar 180º en el clic.

Aquí está el violín de JSFiddle que tiene lo que he intentado hasta ahora. También quería que girara alrededor del centro, así que usé este otro hilo .

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

27

css javascript html jquery css3

Author: Community, 2014-10-03

Source

1 answers

score 70 · Accepted Answer

Creo que sería más fácil hacer esto con transiciones 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"); 
});

Violín de demostración