Double animation d'un cube 3D

**JefReb** · 27/10/2015, 13h08

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 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
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 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
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&Eacute;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>

**JefReb** · 27/10/2015, 13h11

PS: Je n'ai pas mis les préfixes -moz, -webkit etc. pour ne pas alourdir le css ...

**JefReb** · 28/10/2015, 08h54

Finalement comme personne ne répondait, je me suis remis à la tâche et je pense avoir trouvé.

Je donne ma solution si cela intéresse quelqu'un : http://codepen.io/JefReb/pen/LpmLQE
et je clos la discussion.

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
 
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; }
 
.boite-ani        { width:900px; height:150px; margin:100px auto; 
}
/* ====================================== */
/* Définition animation cube     */
/* ====================================== */
.motion 		  {
	width:100px;
	height:100px;
	position:relative;
	/*margin:10px;*/ margin-top:40px;	
	padding:10px;
	animation:animate2 12s infinite alternate;
}
 
.animate 	{ animation:tournie 5s infinite linear;
			  perspective: 2000px; 
	          perspective-origin: 50% 50%;
 }
 
.cube {
  position: relative;
  margin: 0 auto;
  height: 60px;
  width: 60px;
  transition: transform 10s 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;  
}
 
.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 {
  from 	{ left:0px; top:10px;   }
  to	{ left:800px; top:5px; }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="boite-ani">
<div class="motion">
	<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>

Double animation d'un cube 3D [CSS 3]

Animation en CSS

Discussions similaires

Partager

Partager