Bonjour à tous.
J'ai plusieurs fois posé des questions sur le forum et des personnes me sont venues en aide donc aujourd'hui je viens renvoyer l’ascenseur en apportant ma modeste pierre à l'édifice : un code pour réaliser un effet de carte qui se retourne lorsqu'on clique dessus.
html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <body> <div id ="bloc_page"> <div class="flipcard"><!--conteneur de la face avant et face arriere de la carte--> <input type="checkbox" id ="cbx" value="ok"/> <label class="front" for="cbx"></label><!--la checkbox est "liée" aux labels grace à for="" (un click sur ce label cochera la checkbox)--> <label class="back" for="cbx"></label> </div> </div> </body>
css:
Voila j'espères que ca pourra aider d'autres débutants comme moi .
Code : 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 body{ height:100%; width:100%; } .flipcard{ position:relative; display:inline-block; width:12%; height:300px; margin-left:3%; } .back{ /*face arriere carte*/ position:absolute; width:98%; height:98%; border: solid 4px black; -webkit-transform: rotateY(90deg); background:url(photoFace1.jpg); transition: all 1s linear 0s; border-radius: 8px; } .front{/*face avant carte*/ position:absolute; width:98%; height:98%; border: solid 4px black; background:url(fotoFace2.jpg) no-repeat; baground-size:contain; background-position:center; transition: all 1s linear 1s; border-radius: 8px; } #cbx:checked + .front{ -webkit-transform: rotateY(90deg);/*webkit pour google (moz pour firefox etc )*/ transition: all 1s linear 0s; /*l'effet de retournement dure 1s et commence avec 0s de décallage */ } #cbx:checked ~ .back{/*lorsque la checkbox est cochée on modifie un des elements enfant (ici .back)*/ -webkit-transform: rotateY(0deg); transition: all 1s linear 1s;/*l'effet de retournement dure 1s et commence avec 1s de décallage (on attend que la face avant est fini avant de retourner l'arriere) */ } #cbx{ display:none; }
Partager