Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
scaleZ()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
LafonctionCSSscaleZ() définit une transformation qui redimensionne un élément selon l'axe des z. Son résultat est de type<transform-function>.
Exemple interactif
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);}Cette transformation de mise à l'échelle modifie la coordonnée z de chaque point de l'élément par un facteur constant, sauf lorsque le facteur d'échelle vaut 1, auquel cas il n'y a pas de transformation. La mise à l'échelle n'est pas isotrope et les angles de l'élément ne sont pas conservés.scaleZ(-1) définit unesymétrie axiale, avec l'axe z passant par l'origine (tel que défini par la propriététransform-origin).
Dans les exemples interactifs ci-dessus,perspective: 550px; (pour créer un volume 3D) ettransform-style: preserve-3d; (pour que les enfants, les 6 faces du cube, soient aussi positionnés dans un volume 3D) sont appliqués au cube.
Note :scaleZ(sz) est équivalent àscale3d(1, 1, sz).
Syntaxe
scaleZ(s)Valeurs
sEst un nombre (
<number>) représentant le facteur d'échelle à appliquer sur la coordonnée z de chaque point de l'élément.
| Coordonnées cartésiennes surℝ^2(angl.) | Coordonnées homogènes surℝℙ^2 | Coordonnées cartésiennes surℝ^3(angl.) | Coordonnées homogènes surℝℙ^3(angl.) |
|---|---|---|---|
| This transformation applies to the 3D space and can't be represented on the plane. | |||
Syntaxe formelle
<scaleZ()> =
scaleZ([<number>|<percentage>])
Exemples
HTML
<div>Normal</div><div>Déplacé</div><div>Mis à l'échelle</div>CSS
div { width: 80px; height: 80px; background-color: skyblue;}.perspective { /* Ajoute une perspective pour créer un volume 3D */ transform: perspective(400px) translateZ(-100px); background-color: limegreen;}.scaled-translated { /* Ajoute une perspective pour créer un volume 3D */ transform: perspective(400px) scaleZ(2) translateZ(-100px); background-color: pink;}Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-scalez |
Compatibilité des navigateurs
Voir aussi
- La fonction
scaleX() - La fonction
scaleY() - La propriété
transform - Le type de donnée
<transform-function> - La propriété
transform-origin - Propriétés de transformation individuelles :