scaleX()

Die scaleX() CSS Funktion definiert eine Transformation, die ein Element entlang der x-Achse (horizontal) vergrößert oder verkleinert. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

transform: scaleX(1);

transform: scaleX(0.7);

transform: scaleX(1.3);

transform: scaleX(-0.5);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Sie verändert die Abszisse (horizontal, x-Koordinate) jedes Punktes eines Elements um einen konstanten Faktor, außer wenn der Skalierungsfaktor 1 ist, in welchem Fall die Funktion die Identitätstransformation ist. Die Skalierung ist nicht isotrop und die Winkel des Elements bleiben im Allgemeinen nicht erhalten, außer bei Vielfachen von 90 Grad. scaleX(-1) definiert eine Achsensymmetrie, mit einer vertikalen Achse, die durch den Ursprung verläuft (wie durch die Eigenschaft transform-origin angegeben).

Note: scaleX(sx) ist äquivalent zu scale(sx, 1) oder scale3d(sx, 1, 1).

Syntax

scaleX(s)

Werte

s

Ist eine <number> die den Skalierungsfaktor darstellt, der auf die Abszisse (horizontal, x-Koordinate) jedes Punktes des Elements angewendet wird.

Formale Syntax

<scaleX()> = 
  scaleX( [ <number> | <percentage> ] )  

Beispiele

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scaleY()
• scaleZ()
• transform
• scale
• <transform-function>
• transform-origin
• Andere individuelle Transformations-Eigenschaften:
  • translate
  • rotate
  • Hinweis: es gibt keine skew-Eigenschaft