Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
rotateX()
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.
LafonctionCSSrotateX() définit une transformation qui fait pivoter un élément autour de l'axe x (horizontal) sans le déformer. Son résultat est un type de donnée<transform-function>.
Exemple interactif
transform: rotateX(0);transform: rotateX(45deg);transform: rotateX(-0.2turn);transform: rotateX(3.142rad);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>L'axe de rotation passe par une origine, définie par la propriété CSStransform-origin.
Note :rotateX(a) est équivalent àrotate3d(1, 0, 0, a).
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
rotateX(a)Valeurs
aUn
<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 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. | |||
Syntaxe formelle
<rotateX()> =
rotateX([<angle>|<zero>])
Exemples
HTML
<div>Normal</div><div>Tourné</div>CSS
div { width: 80px; height: 80px; background-color: skyblue;}.rotated { transform: rotateX(45deg); background-color: pink;}Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatex |
Compatibilité des navigateurs
Voir aussi
- La propriété
transform - La propriété
rotate - Le type de donnée
<transform-function>