rotateZ()
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 rotateZ() définit une transformation qui fait pivoter un élément autour de l'axe z sans le déformer. Son résultat est un type de donnée <transform-function>.
Exemple interactif
transform: rotateZ(0);
transform: rotateZ(90deg);
transform: rotateZ(-0.25turn);
transform: rotateZ(3.142rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
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é CSS transform-origin.
Note :
rotateZ(a) est équivalent à
rotate(a) ou
rotate3d(0, 0, 1, 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
rotateZ(a)
Valeurs
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 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
<rotateZ()> =
rotateZ( [ <angle> | <zero> ] )
Exemples
HTML
<div>Normal</div>
<div class="rotated">Tourné</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateZ(45deg);
background-color: pink;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatez |
Compatibilité des navigateurs
Voir aussi
- La propriété
transform - La propriété
rotate - Le type de donnée
<transform-function>