Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/10/2016, 06:53
Avatar de bichomen
bichomen
 
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Al rotar un div con CSS se desplaza de lugar

Cuando aplico a a un <div> el estilo animado de rotación me gira, pero se desplaza, aunque luego vuelve a su posición original, yo lo que quiero que gire, pero sin desplazamiento, esta animación no es al pasar el ratón, si no cuando carga la página:

Código:
div#circulo {
    z-index: 999;   
    position:absolute;  
    width:250px; 
    height:200px;   
    left: 50%;
   top: 50%; 

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    -webkit-animation-name: opacidad, giro;
    -webkit-animation-duration: 2s, 2s;

    -moz-animation-name: opacidad, giro;
    -moz-animation-duration: 2s, 2s;

    animation-name: opacidad, giro; 
    animation-duration: 2s, 2s;     
}

@-webkit-keyframes opacidad {
    from { -webkit-opacity: 0; }
    to   { -webkit-opacity: 1; }
}

@-moz-keyframes opacidad {
    from { -moz-opacity: 0; }
    to   { -moz-opacity: 1; }
} 

@-webkit-keyframes giro {
    from { -webkit-transform: rotate(0turn); } 
    to   { -webkit-transform: rotate(15turn);}
}

@-moz-keyframes giro {
    from { -moz-transform: rotate(0turn); }
    to   { -moz-transform: rotate(15turn);}
}
¿Donde esta el error?


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332