Hacer que el elemento se comporte igual después de escalar CSS

Estoy manipulando divs con javascript todo el tiempo.

A veces necesito hacer que esos divs entren dentro de un contenedor cuyo tamaño está cambiando constantemente.

Una forma de hacer que eso suceda es usar css scaling. El problema con la escala es que simplemente modifica la imagen del elemento. El sistema continúa viendo el elemento de la misma manera. Por lo tanto, toda la ubicación, etc. se vuelven sesgadas. Por ejemplo, si posiciono el div para que se convierta en superior: 0%, entonces si el elemento se ha reducido, no irá al cero por ciento, sino un poco más abajo, porque el sistema cree que el div es más grande de lo que muestran sus imágenes.

Este cambio en el comportamiento causa muchas complicaciones ya que el sistema ahora está haciendo suposiciones sobre los elementos que simplemente no son ciertos. Es mala progtwigción.

Miré el “zoom” pero los artículos advirtieron en contra de usarlo.

¿Hay alguna forma de escalar elementos y también mantener el sistema actualizado sobre lo que realmente está sucediendo?

El origen de transformación predeterminado es 50% 50% (en el medio del elemento), por lo que cuando reduce el tamaño de un elemento con scale , los bordes se “retraen” desde todos los lados hacia el centro.

enter image description here

enter image description here

por lo que la esquina superior izquierda parece moverse hacia abajo y hacia la derecha. Pero si establece el origen de la transformación en 0% 0% (arriba a la izquierda), solo se moverán los lados derecho e inferior.

enter image description here

¡Espero que esto ayude!