scale3d() CSS-Funktion - CSS | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

scale3d() 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 scale3d() CSS Funktion definiert eine Transformation, die ein Element im 3D-Raum skaliert. Da die Menge der Skalierung durch einen Vektor [sx, sy, sz] definiert wird, können verschiedene Dimensionen mit unterschiedlichen Maßstäben skaliert werden. Ihr Ergebnis ist ein <transform-function> Datentyp.

In diesem Artikel

Probieren Sie es aus

transform: scale3d(1, 1, 1);

transform: scale3d(1.3, 1.3, 1.3);

transform: scale3d(0.5, 1, 1.7);

transform: scale3d(-1.4, 0.4, 0.7);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Diese Skalierungstransformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten definieren, wie viel in jede Richtung skaliert wird. Wenn alle drei Koordinaten gleich sind, ist die Skalierung einheitlich (isotrop) und das Seitenverhältnis des Elements bleibt erhalten (dies ist eine homothetische Transformation).

Wenn ein Koordinatenwert außerhalb des Bereichs [-1, 1] liegt, wächst das Element entlang dieser Dimension; wenn er innerhalb liegt, schrumpft es. Ist er negativ, resultiert dies in einer Punktspiegelung in dieser Dimension. Ein Wert von 1 hat keine Auswirkung.

Syntax

css

scale3d(sx, sy, sz)

Werte

Ist ein <number>, der die Abszisse (horizontal, x-Komponente) des Skalierungsvektors darstellt.

Ist ein <number>, der die Ordinate (vertikal, y-Komponente) des Skalierungsvektors darstellt.

Ist ein <number>, der die z-Komponente des Skalierungsvektors darstellt.

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

(sx000sy000sz)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{array} \right)

(sx0000sy0000sz00001)\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

Formale Syntax

<scale3d()> =
scale3d( [ <number> | <percentage> ]#{3} )
Diese Syntax spiegelt den neuesten Standard gemäß CSS Transforms Module Level 2 wider. Möglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilität für Informationen zur Unterstützung.

Beispiele

Ohne Verschiebung des Ursprungs

HTML

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

CSS

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

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}

Ergebnis

Verschiebung des Ursprungs der Transformation

HTML

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

CSS

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

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}

transform
<transform-function>
scaleZ()
translate3d()
rotate3d()
Individuelle Transformations-Eigenschaften:
- translate
- scale
- rotate

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

scale3d() CSS-Funktion

In diesem Artikel

Probieren Sie es aus

Syntax

Werte

Formale Syntax

Beispiele

Ohne Verschiebung des Ursprungs

HTML

CSS

Ergebnis

Verschiebung des Ursprungs der Transformation

HTML

CSS

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN