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 skaliert. Da der Umfang 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 ist durch einen dreidimensionalen Vektor charakterisiert. Dessen Koordinaten definieren, wie viel Skalierung in jeder Richtung stattfindet. Wenn alle drei Koordinaten gleich sind, ist die Skalierung gleichmäßig (isotropisch) und das Seitenverhältnis des Elements wird beibehalten (dies ist eine homothetische Transformation).

Befindet sich ein Koordinatenwert außerhalb des Bereichs [-1, 1], wächst das Element in dieser Dimension; innerhalb schrumpft es. Wenn er negativ ist, resultiert in dieser Dimension eine Punktspiegelung. Ein Wert von 1 hat keinen Effekt.

Syntax

css

scale3d(sx, sy, sz)

Werte

sx: Ist ein <number>, der die Abszisse (horizontal, x-Komponente) des Skalierungsvektors darstellt.
sy: Ist ein <number>, der die Ordinate (vertikal, y-Komponente) des Skalierungsvektors darstellt.
sz: 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.		$\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

Übersetzen 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