scale3d()

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

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. Ihre Koordinaten definieren, wie stark die Skalierung in jede Richtung erfolgt. Wenn alle drei Koordinaten gleich sind, ist die Skalierung gleichmäßig (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 in dieser Dimension; wenn innerhalb, schrumpft es. Wenn er negativ ist, ergibt sich eine Punktspiegelung in dieser Dimension. Ein Wert von 1 hat keine Auswirkung.

Syntax

css

scale3d(sx, sy, sz)

Werte

sx: Ist eine <number> die die Abszisse (horizontaler, x-Komponente) des Skalierungsvektors darstellt.
sy: Ist eine <number> die die Ordinate (vertikaler, y-Komponente) des Skalierungsvektors darstellt.
sz: Ist eine <number> die 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 auf die Ebene abgebildet werden.		$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{array} \right)$	$\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} )

Beispiele

Ohne Änderung 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

Verschieben 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;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2 # funcdef-scale3d

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

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

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