From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/rotate()/index.md | 181 --------------------- 1 file changed, 181 deletions(-) delete mode 100644 files/fr/web/css/transform-function/rotate()/index.md (limited to 'files/fr/web/css/transform-function/rotate()') diff --git a/files/fr/web/css/transform-function/rotate()/index.md b/files/fr/web/css/transform-function/rotate()/index.md deleted file mode 100644 index ccd6bec1ed..0000000000 --- a/files/fr/web/css/transform-function/rotate()/index.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -translation_of: Web/CSS/transform-function/rotate() -browser-compat: css.types.transform-function.rotate ---- -{{CSSRef}} - -La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété [`transform-origin`](/fr/docs/Web/CSS/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. - -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 [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une aleur de type [``](/fr/docs/Web/CSS/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. - -```css -rotate(a) -``` - -### Valeurs - -- _a_ - - : Une valeur de type [``](/fr/docs/Web/SS/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
- cos(a)-sin(a) - sin(a)cos(a) - - cos(a)-sin(a)0sin(a)cos(a)0001 - - cos(a)-sin(a)0sin(a)cos(a)0001 - - cos(a)-sin(a)00sin(a)cos(a)0000100001 -
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -## Exemples - -### Exemple simple - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.tourne { - transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */ - background-color: pink; -} -``` - -#### HTML - -```html -
Normal
-
Tourné
-``` - -#### Résultat - -{{EmbedLiveSample("Exemple_simple", "auto", 180)}} - -### Associer une rotation à une autre transformation - -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 ! - -#### CSS - -```css -div { - position: absolute; - left: 40px; - top: 40px; - width: 100px; - height: 100px; - background-color: lightgray; -} - -.rotate { - background-color: transparent; - outline: 2px dashed; - transform: rotate(45deg); -} - -.rotate-translate { - background-color: pink; - transform: rotate(45deg) translateX(180px); -} - -.translate-rotate { - background-color: gold; - transform: translateX(180px) rotate(45deg); -} -``` - -#### HTML - -```html -
Normal
-
Tourné
-
Tourné puis translaté
-
Translaté puis tourné
-``` - -#### Résultat - -{{EmbedLiveSample("Associer_une_rotation_à_une_autre_transformation", "auto", 320)}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`rotate3d()`]() -- cgit v1.2.3-54-g00ecf