From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- .../web/css/transform-function/rotatez()/index.md | 140 +++++++++++---------- 1 file changed, 76 insertions(+), 64 deletions(-) (limited to 'files/fr/web/css/transform-function/rotatez()') diff --git a/files/fr/web/css/transform-function/rotatez()/index.md b/files/fr/web/css/transform-function/rotatez()/index.md index 25d3fbe461..4588fec79b 100644 --- a/files/fr/web/css/transform-function/rotatez()/index.md +++ b/files/fr/web/css/transform-function/rotatez()/index.md @@ -8,60 +8,87 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/rotateZ() --- -
{{CSSRef}}
+{{CSSRef}} -

La fonction rotateZ() définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.

+La fonction **`rotateZ()`** définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. -
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
+{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} -

L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.

+L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}. -

rotateZ(a) est une notation raccourcie équivalente à rotate3D(0, 0, 1, a).

+`rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`. -
-

Note : Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.

-
+> **Note :** Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. -

Syntaxe

+## Syntaxe -
rotateZ(a)
-
+ rotateZ(a) -

Valeurs

+### Valeurs -
-
a
-
Une valeur de type {{cssxref("<angle>")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
-
+- `a` + - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. + + cos(a)-sin(a)0sin(a)cos(a)0001 + + cos(a)-sin(a)00sin(a)cos(a)0000100001 +
-

Exemples

+## Exemples -

HTML

+### HTML -
<p>toto</p>
-<p class="transformation">truc</p>
+```html +

toto

+

truc

+``` -

CSS

+### CSS -
p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -71,38 +98,23 @@ translation_of: Web/CSS/transform-function/rotateZ()
   transform: rotateZ(45deg);
   background-color: blue;
 }
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples","100%","200")}}

+{{EmbedLiveSample("Exemples","100%","200")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}Définition initiale.
+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

+Voir la page sur le type de donnée [``](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -

Voir aussi

+## Voir aussi - +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} -- cgit v1.2.3-54-g00ecf