rotate3d()

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 rotate3d() définit une transformation qui fait pivoter un élément autour d'un axe fixe dans l'espace 3D, sans le déformer. Son résultat est un type de donnée <transform-function>.

Exemple interactif

transform: rotate3d(0, 0, 0, 0);

transform: rotate3d(1, 1, 1, 45deg);

transform: rotate3d(2, -1, -1, -0.2turn);

transform: rotate3d(0, 1, 0.5, 3.142rad);

<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: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  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);
}

Dans l'espace 3D, les rotations possèdent trois degrés de liberté, qui décrivent ensemble un axe de rotation unique. L'axe de rotation est défini par un vecteur [x, y, z] et passe par l'origine (définie par la propriété transform-origin). Si, tel que défini, le vecteur n'est pas normalisé (c'est-à-dire si la somme des carrés de ses trois coordonnées n'est pas égale à 1), l'agent utilisateur le normalisera en interne. Un vecteur non normalisable, comme le vecteur nul [0, 0, 0], entraînera l'ignorance de la rotation, sans toutefois invalider l'ensemble de la propriété CSS.

Note : Contrairement aux rotations dans le plan 2D, la composition des rotations 3D n'est généralement pas commutative. Autrement dit, l'ordre dans lequel les rotations sont appliquées a un impact sur le résultat.

Syntaxe

css

rotate3d(x, y, z, a)

Valeurs

x: Un <number> décrivant la coordonnée x du vecteur indiquant l'axe de rotation, qui peut être un nombre positif ou négatif.
y: Un <number> décrivant la coordonnée y du vecteur indiquant l'axe de rotation, qui peut être un nombre positif ou négatif.
z: Un <number> décrivant la coordonnée z du vecteur indiquant l'axe de rotation, qui peut être un nombre positif ou négatif.
a: Un <angle> représentant l'angle de la rotation. Un angle positif indique une rotation dans le sens horaire, un angle négatif dans le sens antihoraire.

Coordonnées homogènes sur ℝℙ^2
Coordonnées cartésiennes sur ℝ^2 ^(angl.)	Cette transformation s'applique à l'espace 3D et ne peut pas être représentée sur le plan.
Coordonnées cartésiennes sur ℝ^3 ^(angl.)	$\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}$
Coordonnées homogènes sur ℝℙ^3 ^(angl.)	$\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}$

Syntaxe formelle

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

Exemples

Rotation autour de l'axe y

HTML

html

<div>Normal</div>
<div class="rotated">Tourné</div>

CSS

css

body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}

Résultat

Rotation autour d'un axe personnalisé

HTML

html

<div>Normal</div>
<div class="rotated">Tourné</div>

CSS

css

body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 2 # funcdef-rotate3d

Compatibilité des navigateurs

Voir aussi

La propriété transform
La propriété rotate
Le type de donnée <transform-function>

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