Bonjour
Je realise une animation de texte qui consiste a imprimer une rotation sur le texte de bas vers le haut au survol de la souris
ci dessous mon code html et css
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <html> <head> <meta charset="UTF-8"> <title>animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="title"> <div class="container s1"> <span>Animation </span> </div> <div class="container s2"> <span>Animation </span> </div> </h1> </body> </html>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
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 *,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; } body{ font-size: 80px; color: orangered; font-family: abril fatface; height: 80vh; display: flex; align-items: center; justify-content: center; } .title{ position: relative; } title span{ transition: 0.5s; will-change: transform; display: inline-block; } .s1{ transform-origin: bottom; } .s2{ transform-origin: top; transform: translateY(100%) rotateX(-90deg); } .s2 { position: absolute; top: 0; left: 0; } .title:hover .s1 { transform: translateY(-100%) rotateX(-90deg); } .title:hover .s2{ transform: translateY(0%) rotateX(0deg); }
Mon probleme est qu au survol il ne se passe rien .
Partager