Estoy tratando de escribir un código JavaScript que escala un elemento div usando la propiedad CSS transform:scale(), y luego lo quita para que el elemento vuelva a su tamaño original. Pensé que si escalaba el elemento aplicando transform:scale(a), podría desescalarlo aplicando transform:scale(1/a), ya que (elemento xa) x (1/a) = elemento. Sin embargo, eso no parece funcionar. ¿Por que no?
function scale_up() { document.getElementById("div").style.transform = "scale(3)"; } function scale_down() { document.getElementById("div").style.transform = "scale(0.33)"; } setTimeout(scale_up, 3000) setTimeout(scale_down, 6000) /* this should return the div to its original size, but it doesn't */ #div { height: 30px; width: 30px; border-style: solid; } <body> <div id="div"></div> </body>La aplicación de una regla css no cuadra, se reemplaza entre sí.
Primero, su scale_up aplica una transformación: scale(3), su elemento se escala x3 desde su tamaño original . Luego, su scale_down aplica una transformación: scale (0.33), su elemento se escala / 3 de su tamaño original .
Para restablecerlo como normal, aplique una transformación: scale(1);
CSS es un lenguaje declarativo y, por lo tanto, al aplicar nuevas propiedades en un elemento o selector dado, se reemplazan las existentes con el mismo nombre de propiedad; las propiedades no se suman ni se multiplican cuando las configura de nuevo.
Las transformaciones CSS, basadas en esto, funcionan de la misma manera: configurar la transformación a scale(3) y luego configurarla a scale(0.33) tiene el mismo efecto que simplemente configurarla a scale(0.33) : la última transformación reemplaza a la anterior.
Aplicando este principio, para deshacer la transformación, simplemente puede eliminar la propiedad CSS que la aplica a su elemento; puede hacer esto simplemente configurando la propiedad en una cadena vacía, según esta respuesta de StackOverflow . Alternativamente, en este caso, simplemente puede establecer una escala de 1:
function scale_up() { document.getElementById("div").style.transform = "scale(3)"; } function scale_down() { document.getElementById("div").style.transform = ""; // This would also work: //document.getElementById("div").style.transform = "scale(1)"; } setTimeout(scale_up, 3000) setTimeout(scale_down, 6000) #div { height: 30px; width: 30px; border-style: solid; } <body> <div id="div"></div> </body>scale no aplica ningún efecto permanente, solo necesita volver a la escala predeterminada (100%):
document.getElementById("div").style.transform = "scale(1)";