scale3d()

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 scale3d() définit une transformation qui redimensionne un élément dans l'espace 3D. Comme la quantité de mise à l'échelle est définie par un vecteur [sx, sy, sz], elle peut redimensionner chaque dimension à des échelles différentes. Son résultat est un type de donnée <transform-function>.

Exemple interactif

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

Cette transformation de mise à l'échelle est caractérisée par un vecteur tridimensionnel. Ses coordonnées définissent l'ampleur de la mise à l'échelle dans chaque direction. Si les trois coordonnées sont égales, la mise à l'échelle est uniforme (isotrope) et le rapport d'aspect de l'élément est préservé (il s'agit d'une transformation homothétique).

Lorsqu'une valeur de coordonnée est en dehors de l'intervalle [-1, 1], l'élément grandit selon cette dimension ; lorsqu'elle est à l'intérieur, il rétrécit. Une valeur négative entraîne une symétrie centrale selon cette dimension. La valeur 1 n'a aucun effet.

Syntaxe

css

scale3d(sx, sy, sz)

Valeurs

sx: Un nombre (<number>) représentant l'abscisse (composante horizontale, x) du vecteur d'échelle.
sy: Un nombre (<number>) représentant l'ordonnée (composante verticale, y) du vecteur d'échelle.
sz: Un nombre (<number>) représentant la composante z du vecteur d'échelle.

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.)
Cette transformation s'applique à l'espace 3D et ne peut pas être représentée sur le plan.		$\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)$

Syntaxe formelle

<scale3d()> = 
  scale3d( [ <number> | <percentage> ]#{3} )

Exemples

Sans déplacement de l'origine

HTML

html

<div>Normal</div>
<div class="scaled">Mis à l'échelle</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;
}

Résultat

Déplacement de l'origine de la transformation

HTML

html

<div>Normal</div>
<div class="scaled">Mis à l'échelle</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;
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 2 # funcdef-scale3d

Compatibilité des navigateurs

Voir aussi

La propriété transform
Le type de donnée <transform-function>
La fonction must be provided
La fonction must be provided
La fonction must be provided
Autres propriétés individuelles de transformation :

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨25 nov. 2025⁩ par les contributeurs du MDN.

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