Al rotar un div con CSS se desplaza de lugar

[bichomen]

Iniciado por pzin

Lo que falla seguramente es que no ha puesto translate en las animaciones.

Hola, es lo que pienso que tiene algo que ver, pero el translate esta justamente para centrar el div en el centro de la página.

Iniciado por pzin

Tienes que poner todas las transformaciones, aunque no cambien, porque son parte del mismo atributo.

Te refieres a esto:

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, transformacion;
	-webkit-animation-duration: 2s, 2s, 0s;		
	
	-moz-animation-name: opacidad, giro, transformacion;
	-moz-animation-duration: 2s, 2s, 0s;	
	
	animation-name: opacidad, giro, transformacion;	
	animation-duration: 2s, 2s, 0s;	
}

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

@-webkit-keyframes transformacion {
    from { -webkit-transform: translate(0, 0);}
    to   { -webkit-transform: translate(0, 0);}
} 

@-moz-keyframes transformacion {
    from { -moz-transform: translate(0, 0);}
    to   { -moz-transform: translate(0, 0);}
}

bichomen