Función CSS scaleX()

Definición y uso

En CSS scaleX() La función se usa para escalar horizontalmente el elemento.

scaleX() Para aumentar o disminuir el ancho del elemento.

scaleX() La función se usa transform usado en la propiedad.

Ejemplo

Ejemplo 1

Usar scaleX() Aumentar el ancho de múltiples elementos <div>:

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

Prueba por tu cuenta

Ejemplo 2

Usar scaleX() Aumentar el ancho de la imagen:

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

Prueba por tu cuenta

Sintaxis CSS

scaleX(s)

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Tutoriales:Transformaciones 2D de CSS

Referencia:Atributo transform de CSS

Referencia:Atributo CSS scale

Referencia:Función scale() de CSS

Referencia:Función scale3d() de CSS

Referencia:Función scaleY() de CSS