scaleX() CSS-Funktion

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="/proxy/https/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

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

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> )  

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 einzelne Transformations-Eigenschaften:
  • translate
  • rotate
  • Hinweis: es gibt keine skew Eigenschaft