Bonjour,
J'essaye de déplier un cube 3D mais je n'arrive pas à faire tout à fait ce que je souhaite...
Ma face 2 se déplier sur la droite mais elle tourne une première fois (au début de la rotation) puis se déplie à l'envers.
Malgré pas mal de recherches et d'essais je n'y arrive toujours pas..
J'aimerai que ça donne à peu près le même effet que cet exemple:
http://tympanus.net/Development/PFold/
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
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 #contenu { width:position:relative; width:300px; height:200px; margin:0px auto; } .face { width:300px; height:300px; position:absolute; line-height:300px; text-align:center; font-size:80px; border:solid 1px black; } .cote1 { background-color:red; z-index:10; } .cote2 { background-color:green; transform:translateZ(-150px) translateX(150px) rotateY(90deg); animation:face2 5s; animation-delay:1s; animation-fill-mode: forwards; } .cote3 { background-color:yellow; transform:translateZ(-150px) translateX(-150px) rotateY(-90deg); } .cote4 { background-color:grey; transform:translateZ(-150px) translateY(150px) rotateX(-90deg); } .cote5 { background-color:blue; transform:translateZ(-150px) translateY(-150px) rotateX(90deg); } .cote6 { background-color:orange; transform:translateZ(-300px); } .cube { position:relative; width:300px; height:300px; animation:AnimCube 1s; transform-style: preserve-3d; } @keyframes AnimCube { from {} to {transform-origin: 50% 50%; transform: rotateX(360deg) rotateY(360deg)} } @keyframes face2 { from {} to {transform-origin: 100% 0%; transform: rotateY(180deg)} } /*@keyframes face4 { from {} to {transform-origin: 100% 100%; transform: rotateX(-180deg)} } @keyframes face3 { from {} to {transform-origin: 100% 0%; transform: rotateX(180deg)} } @keyframes face2 { from {} to {transform-origin: 100% 100%; transform: rotateZ(180deg) } } animation:face5 5s; animation-delay:1s; animation-fill-mode: forwards; */
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 <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Accueil</title> </head> <body> <div id="contenu"> <div class="cube"> <div class="face cote1">1</div> <div class="face cote2">2</div> <div class="face cote3">3</div> <div class="face cote4">4</div> <div class="face cote5">5</div> <div class="face cote6">6</div> </div> </div> </body> </html>
Merci pour votre aide !
Partager