scaleX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die scaleX() CSS-Funktion definiert eine Transformation, die ein Element entlang der x-Achse (horizontal) skaliert. 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 des Elements um einen konstanten Faktor, außer wenn der Skalierungsfaktor 1 ist, in diesem Fall handelt es sich bei der Funktion um 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 spezifiziert).

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

Syntax

css

scaleX(s)

Werte

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

Kartesische Koordinaten auf ℝ^2	Homogene Koordinaten auf ℝℙ^2	Kartesische Koordinaten auf ℝ^3	Homogene Koordinaten auf ℝℙ^3
$\left( \begin{array}{cc} s & 0 \\ 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} s & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[s 0 0 1 0 0]`

Formale Syntax

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

Beispiele

HTML

html

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

CSS

css

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

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

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 1 # funcdef-transform-scalex

Browser-Kompatibilität

Siehe auch

scaleY()
scaleZ()
transform
scale
<transform-function>
transform-origin
Weitere individuelle Transform-Eigenschaften:
- translate
- rotate
- Hinweis: Es gibt keine skew-Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden