1div {
2 width: 80px;
3 height: 80px;
4 background-color: skyblue;
5}
6
7.tourne {
8 transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
9 background-color: pink;
10}
11
1<style>
2div {
3 width: 80px;
4 height: 80px;
5 background-color: skyblue;
6}
7.rotated {
8 transform: rotate(45deg);
9 background-color: pink;
10}
11</style>
12
13/* In body of html doc */
14<div>Normal</div>
15<div class="rotated">Rotated</div>
1div {
2 width: 80px;
3 height: 80px;
4 background-color: skyblue;
5}
6
7.rotated {
8 transform: rotate(45deg); /* Equal to rotateZ(45deg) */
9 background-color: pink;
10}
11
1div {
2 position: absolute;
3 left: 40px;
4 top: 40px;
5 width: 100px;
6 height: 100px;
7 background-color: lightgray;
8}
9
10.rotate {
11 background-color: transparent;
12 outline: 2px dashed;
13 transform: rotate(45deg);
14}
15
16.rotate-translate {
17 background-color: pink;
18 transform: rotate(45deg) translateX(180px);
19}
20
21.translate-rotate {
22 background-color: gold;
23 transform: translateX(180px) rotate(45deg);
24}
25
1###### Combining rotation with another transformation ######
2
3**** HTML Code: ****
4<div>Normal</div>
5<div class="rotate">Rotated</div>
6<div class="rotate-translate">Rotated + Translated</div>
7<div class="translate-rotate">Translated + Rotated</div>
8
9**** CSS Code: ****
10div {
11 position: absolute;
12 left: 40px;
13 top: 40px;
14 width: 100px;
15 height: 100px;
16 background-color: lightgray;
17}
18
19.rotate {
20 background-color: transparent;
21 outline: 2px dashed;
22 transform: rotate(45deg);
23}
24
25.rotate-translate {
26 background-color: pink;
27 transform: rotate(45deg) translateX(180px);
28}
29
30.translate-rotate {
31 background-color: gold;
32 transform: translateX(180px) rotate(45deg);
33}