1. Web
  2. CSS
  3. Référence CSS
  4. Valeurs
  5. <transform-function>
  6. scaleZ()

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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⁩.

La fonction CSS scaleZ() 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 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);
}

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 une symé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) et transform-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

css
scaleZ(s)

Valeurs

s

Est 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.
(10001000s)\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & s \end{array} \right)
(1000010000s00001)\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & s & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

Syntaxe formelle

<scaleZ()> = 
  scaleZ( [ <number> | <percentage> ] )

Exemples

HTML

html
<div>Normal</div>
<div class="perspective">Déplacé</div>
<div class="scaled-translated">Mis à l'échelle</div>

CSS

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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content