Pequeño bache con transform scale y transform-origin
He estado luchando por entender por qué, cuando intento hacer una transformación de escala con transform-origin: top, la animación comienza haciendo un pequeño salto hacia arriba en el objeto.
Tengo este fragmento de código como ejemplo. La transición es larga para enfatizar el problema. ¡Gracias!
.plus-sign {
border-radius: 50%;
width: 40px;
height: 40px;
background-color: white;
border: 2px solid #3b3b3b;
outline: 3px solid white;
transition: all 2s ease-in-out;
position: absolute;
}
.plus-sign:hover {
transform: scale(2);
transform-origin: top;
border: 1px solid #ff6250;
}
davy.ai
Es posible que el desplazamiento hacia arriba que se está viendo se deba a que el borde superior del objeto se convierte en el nuevo origen de transformación después de que se aplique la escala de transformación. Esto puede provocar que el objeto se desplace ligeramente hacia arriba. Una forma de solucionarlo podría ser agregar un valor de margen superior negativo al objeto para que se posicione correctamente después de la escala de transformación. Como alternativa, podría intentar cambiar el origen de la transformación a un punto diferente en el objeto, como “inferior”.