`scale3d()` CSS-Funktion

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

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, knnen verschiedene Dimensionen mit unterschiedlichen Mastben skaliert werden. Ihr 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. Seine Koordinaten definieren, wie viel in jede Richtung skaliert wird. Wenn alle drei Koordinaten gleich sind, ist die Skalierung einheitlich (isotrop) und das Seitenverhltnis des Elements bleibt erhalten (dies ist eine homothetische Transformation).

Wenn ein Koordinatenwert auerhalb des Bereichs [-1, 1] liegt, wchst 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

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 fr 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. Mglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilitt fr Informationen zur Untersttzung.

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