Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Al rotar un div con CSS se desplaza de lugar en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/10/2016, 06:53
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 18 años, 1 mes
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
  #2 (permalink)  
Antiguo 03/10/2016, 09:05
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 13 años, 5 meses
Puntos: 1145
Respuesta: Al rotar un div con CSS se desplaza de lugar

Te falta establecer -> transform-origin
  #3 (permalink)  
Antiguo 03/10/2016, 14:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años
Puntos: 2113
Respuesta: Al rotar un div con CSS se desplaza de lugar

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.
__________________
(:
  #4 (permalink)  
Antiguo 04/10/2016, 06:58
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 18 años, 1 mes
Puntos: 2
Respuesta: Al rotar un div con CSS se desplaza de lugar

Cita:
Iniciado por pzin Ver Mensaje
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.

Cita:
Iniciado por pzin Ver Mensaje
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
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #5 (permalink)  
Antiguo 04/10/2016, 07:14
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 18 años, 1 mes
Puntos: 2
Respuesta: Al rotar un div con CSS se desplaza de lugar

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

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


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #6 (permalink)  
Antiguo 04/10/2016, 17:46
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 6 años, 3 meses
Puntos: 4
Respuesta: Al rotar un div con CSS se desplaza de lugar

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:
Ver original
  1. .contenedor {
  2.   position:absolute;
  3.   display:flex;
  4.   width:100%;
  5.   height:100%;
  6. }
  7. div#circulo {
  8.   margin:auto;
  9.     width:250px;
  10.     height:200px;  
  11.     box-sizing: border-box;
  12.     -webkit-box-sizing: border-box;
  13.     -moz-box-sizing: border-box;
  14.     -webkit-animation-name: opacidad, giro;
  15.     -webkit-animation-duration: 2s, 2s;
  16.     -moz-animation-name: opacidad, giro;
  17.     -moz-animation-duration: 2s, 2s;
  18.     animation-name: opacidad, giro;
  19.     animation-duration: 2s, 2s;    
  20. }
  21.  
  22. @-webkit-keyframes opacidad {
  23.     from { -webkit-opacity: 0;}
  24.     to   { -webkit-opacity: 1;}
  25. }
  26.  
  27. @-moz-keyframes opacidad {
  28.     from { -moz-opacity: 0;}
  29.     to   { -moz-opacity: 1;}
  30. }
  31.  
  32. @-webkit-keyframes giro {
  33.     from { -webkit-transform: rotate(0turn);}
  34.     to   { -webkit-transform: rotate(15turn);}
  35. }
  36.  
  37. @-moz-keyframes giro {
  38.     from { -moz-transform: rotate(0turn);}
  39.     to   { -moz-transform: rotate(15turn);}
  40. }
  41.  
  42. div#circulo:hover {
  43.    opacity: 0.9;
  44.    transform: scale(1.1);
  45. }
  #7 (permalink)  
Antiguo 05/10/2016, 09:23
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 18 años, 1 mes
Puntos: 2
Respuesta: Al rotar un div con CSS se desplaza de lugar

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
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332

Etiquetas: desplaza, height, lugar, rotar, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:12.