web-dev-qa-db-fra.com

Problème faisant tourner l'icône de Bootstrap3

Inspiré par Fontawesome , j'essaie de créer une icône tournante avec bootstrap3. Il est facilement réalisable via une transition et une transformation CSS3. Le problème est que l'icône ne tourne pas autour du centre. Il balance tout en tournant. 

Code collé ci-dessous. Quelqu'un sait ce qui cause le problème?

.spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <h1 class="text-center">
    <span class="glyphicon glyphicon-refresh spin"></span>
    <span class="glyphicon glyphicon-record spin"></span>
    </h1>

css3twitter-bootstrap
43
duckegg

Le problème est que vous faites pivoter un élément qui n'est pas centré dans votre étendue.

Si vous voulez une vraie solution, ajoutez transform-Origin sur .spin pour changer le centre de rotation

.spin{
     -webkit-transform-Origin: 50% 58%;
     transform-Origin:50% 58%;
     -ms-transform-Origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .2s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}

http://jsfiddle.net/L4zTu/5/

62
Donovan Charpin

J'ai écrit un blog post à ce sujet. Référencez simplement le glyphicon avec une classe personnalisée:

<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

La classe glyphicon-spin a été construite en étudiant la classe fa-spin dans la feuille de style FontAwesome:

h4 {
    font-size:18px;
    font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>FontAwesome</h4>

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-refresh fa-spin-custom"></i>

<br />
<br />

<h4>Glyphicons</h4>
 <span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

56
Chad Kuehn

Un point supplémentaire, si vous suivez cet exemple.

Les définitions d'images clés doivent permettre le cas où certaines propriétés seront préfixées par un fournisseur et d'autres pas. Par exemple, dans Chrome 35, les définitions d'images clés actuelles ne fonctionneront pas, car les images clés ne sont pas préfixées par le fournisseur, mais la transformation le reste.

Quelque chose comme ceci devrait permettre tous les cas actuels/futurs:

@-moz-keyframes spin
{
    from
    {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin
{
    from
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin
{
    from
    {
        -wekbit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
2
Matt McDonald

Font Awesome offre un moyen pratique et agréable d'obtenir une icône en rotation: 

http://fortawesome.github.io/Font-Awesome/examples/

2
meffect

Aucun de ce qui précède n'a fonctionné pour moi mais ceci: 

.spin {
        animation: spin infinite 4s linear;
        height: 80px;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
0
Peter Moses Mohemos

J'espère que cela pourra aider quelqu'un utilisant font-awesome.

Essayez ceci. 

<span class="sync-state pull-right" style="display: none;">
    <i class="fa fa-refresh fa-spin"></i> synching..
</span>

Ensuite, sur votre javascript, récupérez l’élément par classe à l’aide d’un clic ou d’un survol qui vous convient le mieux.

$(".sync-state").fadeIn();

Après l'action, vous pouvez 

$(".sync-state").fadeOut();

J'espère que cette aide. Jquery & Font-awesome

0
Delino