Problème faisant tourner l’icône Bootstrap3

Inspiré par Fontawesome , j’essaie de créer une icône en rotation avec bootstrap3. Il est facilement réalisable via la transition et la transition CSS3. Le problème est que l’icône ne tourne pas autour du centre. Il oscille 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); } } 
  

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 l’ 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/

J’ai écrit un blog à ce sujet. Il suffit de référencer le glyphicon avec une classe personnalisée:

  

La classe glyphicon-spin é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); } } 
   

FontAwesome



Glyphicons

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

Les définitions des images clés doivent tenir compte du cas où certaines propriétés seront préfixées par des fournisseurs et d’autres non. Par exemple, dans Chrome 35, les définitions d’images clés actuelles ne fonctionnent pas, car les images clés ne sont pas préfixées par le fournisseur, mais la transformation l’est toujours.

Quelque chose comme cela 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); } } 

Font Awesome a un moyen pratique de faire tourner une icône:

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

J’espère que cela pourrait aider quelqu’un qui utilise font-awesome.

Essayez ceci.

  

Ensuite, sur votre javascript, il suffit d’obtenir l’élément par classe onclick ou hover qui vous convient le mieux.

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

Après l’action de l’événement, vous pouvez

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

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

Bootstrap vous fournit une bibliothèque de classes définie pour faire cela. Utilisez la classe “icon-spin” avec votre classe d’icons Par exemple: – >