Функция scaleY

La función scaleY escala un elemento en el eje Y. El escalado se realiza alrededor del punto definido por la propiedad transform-origin. El valor de la función es un número entero o fraccionario. Si es mayor que 1 - el elemento se agranda, si es menor (por ejemplo, 0.5) - el elemento se reduce. Si se establece 1 - no cambia nada (este es el valor por defecto).

Sintaxis

cssselector {
  transform: scaleY(número);
}

Ejemplo

Al pasar el cursor sobre el bloque, aumentaremos la escala a 1.5 veces en el eje Y:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleY(1.5);
}

Результат:

Ejemplo

Al pasar el cursor sobre el bloque, reduciremos la escala a 2 veces en el eje Y:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleY(0.5);
}

Результат:

Véase también