Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
scaleZ()
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.
DiescaleZ()CSSFunktion definiert eine Transformation, die ein Element entlang der z-Achse vergrößert oder verkleinert. Ihr Ergebnis ist ein<transform-function> Datentyp.
Probieren Sie es aus
transform: scaleZ(1);transform: scaleZ(1.4);transform: scaleZ(0.5);transform: scaleZ(-1.4);<section> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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 verändert die z-Koordinate jedes Elementpunktes um einen konstanten Faktor, außer wenn der Skalierungsfaktor 1 ist. In diesem Fall ist die Funktion die Identitätstransformation. Die Skalierung ist nicht isotrop und die Winkel des Elements werden nicht beibehalten.scaleZ(-1) definiert eineaxiale Symmetrie, wobei die z-Achse durch den Ursprung verläuft (wie durch dietransform-origin Eigenschaft angegeben).
In den oben stehenden interaktiven Beispielen wurdenperspective: 550px; (um einen 3D-Raum zu schaffen) undtransform-style: preserve-3d; (um sicherzustellen, dass die Kinder, die 6 Seiten des Würfels, ebenfalls im 3D-Raum positioniert sind) auf den Würfel angewendet.
Hinweis:scaleZ(sz) ist äquivalent zuscale3d(1, 1, sz).
Syntax
scaleZ(s)Werte
sIst ein
<number>welcher den Skalierungsfaktor darstellt, der auf die z-Koordinate jedes Punktes des Elements angewendet wird.
| Kartesische Koordinaten aufℝ^2 | Homogene Koordinaten aufℝℙ^2 | Kartesische Koordinaten aufℝ^3 | Homogene Koordinaten aufℝℙ^3 |
|---|---|---|---|
| Diese Transformation bezieht sich auf den 3D-Raum und kann nicht auf der Ebene dargestellt werden. | |||
Formale Syntax
<scaleZ()> =
scaleZ([<number>|<percentage>])
Beispiele
HTML
<div>Normal</div><div>Translated</div><div>Scaled</div>CSS
div { width: 80px; height: 80px; background-color: skyblue;}.perspective { /* Includes a perspective to create a 3D space */ transform: perspective(400px) translateZ(-100px); background-color: limegreen;}.scaled-translated { /* Includes a perspective to create a 3D space */ transform: perspective(400px) scaleZ(2) translateZ(-100px); background-color: pink;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-scalez |
Browser-Kompatibilität
Siehe auch
scaleX()scaleY()transform<transform-function>transform-origin- Einzelne Transformations-Eigenschaften: