Funzione CSS scaleX()

Definizione e uso

CSS scaleX() La funzione è usata per scalare orizzontalmente l'elemento.

scaleX() aggiunge o riduce la larghezza dell'elemento.

scaleX() La funzione in transform usato nell'attributo.

Esempio

Esempio 1

Usare scaleX() Agrandire la larghezza di più elementi <div>:

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

Prova tu stesso

Esempio 2

Usare scaleX() Agrandire la larghezza dell'immagine:

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

Prova tu stesso

Sintassi CSS

scaleX(s)

Dettagli tecnici

Supporto del browser

Le cifre nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Pagine correlate

Lezione:Trasformazione 2D CSS

Riferimento:Proprietà CSS transform

Riferimento:Proprietà CSS scale

Riferimento:Funzione CSS scale()

Riferimento:Funzione CSS scale3d()

Riferimento:Funzione CSS scaleY()