Problema que hace girar el icono de Bootstrap3
Inspirado en Fontawesome, estoy tratando de hacer un icono giratorio con bootstrap3. Se logra fácilmente a través de la transición y transformación de CSS3. El problema es que el icono no gira alrededor del centro. Se balancea mientras gira.
Código pegado a continuación. ¿Alguien sabe qué causa el problema?
.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>6 answers
El problema es que rotas un elemento que no está centrado en tu span.
Si desea una solución real, agregue transform-origin en .spin para cambiar el centro de rotación
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-19 20:50:50
Escribí un blog post sobre esto. Simplemente haga referencia al glyphicon con una clase personalizada:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
La clase glyphicon-spin se construyó estudiando la clase fa-spin en la hoja de estilos 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-26 09:54:54
Un punto adicional, si sigue este ejemplo.
Las definiciones de fotogramas clave deben tener en cuenta el caso en el que algunas propiedades serán sin prefijo de proveedor y otros no. Por ejemplo, en Chrome 35 las definiciones de fotogramas clave actuales no funcionará como fotogramas clave no es prefijo de proveedor, pero transformar todavía lo es.
Algo como esto debería permitir todos los casos actuales/futuros:
@-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);
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-23 10:08:23
Font Awesome tiene una forma conveniente de hacer girar un icono:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-30 21:00:19
Espero que esto pueda ayudar a alguien usando font-awesome.
Solo prueba esto.
<span class="sync-state pull-right" style="display: none;">
<i class="fa fa-refresh fa-spin"></i> synching..
</span>
Luego, en su javascript, simplemente obtenga el elemento por clase onclick o on hover que funcione mejor para usted.
$(".sync-state").fadeIn();
Después de la acción del evento puede
$(".sync-state").fadeOut();
Espero que esto ayude. Jquery & Font-impresionante
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-09 15:21:51
Bootstrap le proporciona una biblioteca de clases definida para hacer eso.
Usa la clase "icon-spin" junto con tu clase icon
Por ejemplo:- <i class="icon-refresh icon-spin"></i>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-23 05:05:00