[SOLUCIONADO] Al rotar un div con CSS se desplaza de lugar

[bichomen]

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

[ArturoGallegos]

Te falta establecer -> transform-origin

[pzin]

El origin está en el centro por defecto.

Lo que falla seguramente es que no ha puesto translate en las animaciones. Tienes que poner todas las transformaciones, aunque no cambien, porque son parte del mismo atributo.

[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

[bichomen]

Os pongo un enlace para visualizar el código gráficamente:

http://codepen.io/bichomen/pen/jraKYW


bichomen

[jorgecanto]

Prueba a envolverlo todo en un contenedor y darle un display flex para centrar el círculo. Parece que es el translate lo que te está dando problemas.

Código CSS:

.contenedor {
  position:absolute;
  display:flex;
  width:100%;
  height:100%; 
}
div#circulo {
  margin:auto;
    width:250px; 
    height:200px;   
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -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);}
}
 
div#circulo:hover {
   opacity: 0.9;
   transform: scale(1.1);
}
 

[bichomen]

Hola @jorgecanto, gracias, de esa forma el código funciona correctamente, salvo por un matiz y es que una vez exportado el código a la página donde debe ir, donde hay más divs, arriba y abajo, se descompone el maquetado, después de mucho lidiar con esto, la solución era muy sencilla, tanto en el div del circulo, como en la clase contenedor solo había que añadir

Código:

top: 0;

y con esta linea queda por fin el div centrado sin desplazarse, gracias.


bichomen