1. Web
  2. CSS
  3. Reference
  4. Values
  5. <transform-function>
  6. scaleY()

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

scaleY() CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

Probieren Sie es aus

transform: scaleY(1);

transform: scaleY(0.7);

transform: scaleY(1.3);

transform: scaleY(-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 Ordinate (vertikal, y-Koordinate) jedes Punktes eines Elements um einen konstanten Faktor, außer wenn der Skalierungsfaktor 1 ist, in diesem Fall ist die Funktion die identische Transformation. Die Skalierung ist nicht isotrop, und die Winkel des Elements bleiben nicht erhalten. scaleY(-1) definiert eine axiale Symmetrie mit einer horizontalen Achse, die durch den Ursprung verläuft (wie durch die transform-origin Eigenschaft angegeben).

Hinweis: scaleY(sy) ist gleichbedeutend mit scale(1, sy) oder scale3d(1, sy, 1).

transform: rotateX(180deg); === transform: scaleY(-1);

Syntax

css
scaleY(s)

Werte

s

Ist ein <number>, der den Skalierungsfaktor darstellt, der auf die Ordinate (vertikal, y-Koordinate) jedes Punktes des Elements angewendet wird.

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

Formale Syntax

<scaleY()> = 
  scaleY( <number> )

Beispiele

HTML

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

CSS

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

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

Ergebnis

Spezifikationen

Spezifikation
CSS Transforms Module Level 1
# funcdef-transform-scaley

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden