Double animation d'un cube 3D
Bonjour à tous, et merci à ceux qui regardent régulièrement et aide à se perfectionner.
Je butte sur un problème d'animation et je dois avouer que j'ai du mal à comprendre les translation, rotation et surtout perspective.
Je ne pense pas être le seul, mais après avoir pas mal cherché en tâtonnant, je vous expose mon soucis.
- Le cube 3D tourne correctement, mais je trouve qu'il n'a pas toujours la forme ou l'image d'un cube 3D (probablement la perspection à 1000px)
- Je souhaiterais que le cube se déplace de gauche à droite et droite à gauche comme le fait en exemple le carré rouge rajouté
- Je sens intuitivement qu'il y a trop de div imbriquée et qu'il serait possible de simplifier.
Merci d'avance si un de vous se penche sur ce cas...
J'ai mis l'exemple sur: http://codepen.io/JefReb/pen/MaGgZQ
Code:
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
|
html, body { margin:0; padding:0; height:100%; font-size:100%; }
body { font-family:Georgia, "Times New Roman", Times, verdana, arial,sans-serif; font-weight:normal; }
body { width:960px; margin:0 auto; background-color:#fff; }
@font-face { font-family: "Abbeyline"; src:url(/fonts/Abbeyline.ttf); }
/* ================================= */
/* Définition pour section */
/* ================================= */
#page { width:960px; height:auto; min-height:600px; margin:0; padding:0;
background-image: url(/images/grid.jpg); background-repeat:repeat; }
/* ================================= */
/* Définition pour article */
/* ================================= */
#contenu { width:940px; height:auto; min-height:400px;
margin:0 auto;
padding:10px; padding-bottom:50px; }
/* établir un nouveau contexte de formatage */
/* cela permet au float enfants de rester dans le conteneur parent */
#contenu { overflow : hidden; }
/* ====================================== */
/* Définition du bandeau de la page */
/* ====================================== */
#fondbandeau { margin:0; padding:0px;
height:177px; width:960px;
background-color:#CCC;
box-shadow:10px 10px 5px #9c9c9c; }
#bandeau { position:relative; left:0; top:26px; margin:0px; padding:0px; height:152px; width:960px; }
.pub { list-style:none; width:960px; margin:0; margin-left:100px; padding:5px 0 0 0; }
.pub li { float:left; margin:0 0 0 100px; padding:0; position:relative; z-index:998;}
.pub li { font-size:130%; font-weight:bold; color:#FFF; }
/* ====================================== */
/* Définition animation anniversaire */
/* ====================================== */
.boite-ani { width:900px; height:150px; margin:10px auto;
position:absolute; left:40px; top:-30px;
}
.animate2 {
width:70px;
height:70px;
position:relative;
margin:10px; margin-top:40px;
padding:10px;
animation:animate2;
}
/* ====================================== */
/* Définition animation cube */
/* ====================================== */
.animate { animation:tournie 20s infinite linear;
perspective: 1000px;
perspective-origin: 50% 50%;
}
.cube {
position: relative;
margin: 0 auto;
height: 60px;
width: 60px;
transition: transform 2s linear;
transform-style: preserve-3d;
}
.cube > div {
position: absolute;
height: 60px;
width: 60px;
padding: 20px;
opacity: 0.95;
background-position:center center;
text-align:center; font-size:78%;
}
.cube div:nth-child(1) {
transform : translateZ(50px);
background-color : yellow;
}
.cube div:nth-child(2) {
transform : rotateY(90deg) translateZ(50px);
background-color : red;
}
.cube div:nth-child(3) {
transform : rotateY(180deg) translateZ(50px);
background-color : blue;
}
.cube div:nth-child(4) {
transform : rotateY(-90deg) translateZ(50px);
background-color : green;
}
.cube div:nth-child(5) {
transform : rotateX(-90deg) translateZ(50px) rotate(180deg);
background-color : white;
}
.cube div:nth-child(6) {
transform : rotateX(90deg) translateZ(50px);
background-color : black;
text-align:center;
}
div.carre { width:100px; height:100px;
position:relative;
background:red;
animation:animate2 5s infinite alternate; }
.gros { font-size:200%; text-align:center; font-weight:bold;}
.noir { color:black; }
.blanc { color:white; }
.bleu { color:blue; }
.jaune { color:yellow; }
.rouge { color:red; }
@keyframes tournie {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes animate2
{
0% { left:0px; top:50px; }
10% { left:60px; top:50px; }
20% { left:80px; top:50px; }
25% { left:150px; top:50px; }
30% { left:200px; top:50px; }
45% { left:250px; top:50px; }
60% { left:500px; top:50px; }
70% { left:700px; top:50px; }
80% { left:450px; top:50px; }
90% { left:200px; top:50px; }
95% { left:30px; top:50px; }
100% { left:30px; top:50px; }
} |
Code:
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
|
<body>
<a name="debut"></a>
<header id="fondbandeau">
<ul class="pub">
<li>CONSEIL</li>
<li>CONCEPTION</li>
<li>RÉALISATION</li>
</ul>
<div id="bandeau">
<div class="boite-ani">
<div class="animate2">
<div class="cube animate" >
<div class="rouge">Au Vésinet depuis<br/><span class="gros">1994</span></div>
<div class="blanc">Au Vésinet depuis<br/><span class="gros">1994</span></div>
<div class="jaune">Au Vésinet depuis<br/><span class="gros">1994</span></div>
<div class="jaune">Au Vésinet depuis<br/><span class="gros">1994</span></div>
<div class="noir">Au Vésinet depuis<br/><span class="gros">1994</span></div>
<div class="blanc">Au Vésinet depuis<br/><span class="gros">1994</span></div>
</div>
</div>
</div>
</header>
<section id="page">
<div class="animate2">
<div class="carre"></div>
</div>
</section>
<!--http://codepen.io/JefReb/pen/MaGgZQ-->
</body> |
