1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
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 [`<transform-function>`](/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 [`<angle>`](/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 [`<angle>`](/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.
<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>
</table>
## 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
<div>Normal</div>
<div class="tourne">Tourné</div>
```
#### 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
<div>Normal</div>
<div class="rotate">Tourné</div>
<div class="rotate-translate">Tourné puis translaté</div>
<div class="translate-rotate">Translaté puis tourné</div>
```
#### 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)
- [`<transform-function>`](/fr/docs/Web/CSS/transform-function)
- [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>)
|
