diff options
Diffstat (limited to 'files/fr/web/css/transform-function/rotate()/index.md')
| -rw-r--r-- | files/fr/web/css/transform-function/rotate()/index.md | 190 |
1 files changed, 111 insertions, 79 deletions
diff --git a/files/fr/web/css/transform-function/rotate()/index.md b/files/fr/web/css/transform-function/rotate()/index.md index 4754dd3bbc..e097481ce2 100644 --- a/files/fr/web/css/transform-function/rotate()/index.md +++ b/files/fr/web/css/transform-function/rotate()/index.md @@ -8,55 +8,98 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/rotate() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La fonction <strong><code>rotate()</code></strong> définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.</p> +La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément. -<p>La rotation plane est définie par un angle, l'argument de 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 valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> +La rotation plane est définie par un angle, l'argument de 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 valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("<angle>")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p> +L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une valeur de type {{cssxref("<angle>")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre. -<pre class="syntaxbox">rotate(<var>a</var>) -</pre> + rotate(a) -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><var>a</var></dt> - <dd>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.</dd> -</dl> +- _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. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th> - <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> - <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> - <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> - <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> - <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> - </tr> - <tr> - <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th> + <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> + <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr + ><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr + ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td colspan="1" rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr + ><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr + ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td colspan="1" rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd + ><mtd>0</mtd></mtr + ><mtr + ><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr + ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr + ><mtr + ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -66,24 +109,27 @@ translation_of: Web/CSS/transform-function/rotate() transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */ background-color: pink; } -</pre> +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div>Normal</div> -<div class="tourne">Tourné</div></pre> +```html +<div>Normal</div> +<div class="tourne">Tourné</div> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Exemple_simple", "auto", 180)}}</p> +{{EmbedLiveSample("Exemple_simple", "auto", 180)}} -<h3 id="Associer_une_rotation_à_une_autre_transformation">Associer une rotation à une autre transformation</h3> +### Associer une rotation à une autre transformation -<p>Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !</p> +Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation ! -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { position: absolute; left: 40px; top: 40px; @@ -107,47 +153,33 @@ translation_of: Web/CSS/transform-function/rotate() background-color: gold; transform: translateX(180px) rotate(45deg); } -</pre> +``` -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div>Normal</div> -<div class="rotate">Tourné</div> -<div class="rotate-translate">Tourné puis translaté</div> -<div class="translate-rotate">Translaté puis tourné</div> -</pre> +```html +<div>Normal</div> +<div class="rotate">Tourné</div> +<div class="rotate-translate">Tourné puis translaté</div> +<div class="translate-rotate">Translaté puis tourné</div> +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}}</p> +{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td> - <td>{{Spec2("CSS3 Transforms")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>) |