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.

Lafonction CSSrotate3d() 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>  <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: 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 pasnormalisé (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{matrix} 1 + (1 - cos (a)) (x^{2} - 1) & z \cdot sin (a) + x y (1 - cos (a)) & - y \cdot sin (a) + x z (1 - cos (a)) \\ - z \cdot sin (a) + x y (1 - cos (a)) & 1 + (1 - cos (a)) (y^{2} - 1) & x \cdot sin (a) + y z (1 - cos (a)) \\ y \cdot sin (a) + x z (1 - cos (a)) & - x \cdot sin (a) + y z (1 - cos (a)) & 1 + (1 - cos (a)) (z^{2} - 1) \end{matrix}) \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{matrix} 1 + (1 - cos (a)) (x^{2} - 1) & z \cdot sin (a) + x y (1 - cos (a)) & - y \cdot sin (a) + x z (1 - cos (a)) & 0 \\ - z \cdot sin (a) + x y (1 - cos (a)) & 1 + (1 - cos (a)) (y^{2} - 1) & x \cdot sin (a) + y z (1 - cos (a)) & 0 \\ y \cdot sin (a) + x z (1 - cos (a)) & - x \cdot sin (a) + y z (1 - cos (a)) & 1 + (1 - cos (a)) (z^{2} - 1) & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \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>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>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;}