Comment insérer un cube 3D dans un autre cube 3D
Bonjour à tous,
J'ai un cube 3D (cf post Comment lancer l'effet d'éclatement d'un cube 3D......merci pour l'aide apportée par NoSmoking et dans lequel j'aimerai insérer un cube 3D plus petit. Mais voilà, si j'ajoute le code ci-dessous, j'ai deux cubes l'un contre l'autre.
Alors comment faire pour avoir un cube type poupée russe (matriochkas)... Da!
J'ai donc ajouté l'appel à un CSS dont le code est le suivant
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
|
body
{
}
.cube1
{
position: absolute;
width: 75px;
height: 75px;
/* Forcer le navigateur à conserver le mode de rendu 3d (ce qui n'est pas le cas par défaut) */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
/* Application d'une animation sur l'élément .cube (qui contient nos faces) */
-webkit-animation: rotate-cube 15s linear infinite;
animation: rotate-cube 15s linear infinite;
}
/** Toutes les faces du cube ont la classe .cubeface
(plus pratique que d'écrire #face1, #face2, ...)
**/
.cubeface1
{
position: absolute;
/** Application d'une transition pour
avoir un effet d'interpolation entre
l'état normal et l'état :hover pour
chaque face
**/
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-ms-transition: all 600ms;
-o-transition: all 600ms;
transition: all 600ms;
}
/** On déplace chaque face dans l'espace indépendamment,
pour construire notre cube
**/
#face7 {
-webkit-transform: translateZ(37px);
-moz-transform: translateZ(37px);
-ms-transform: translateZ(37px);
-o-transform: translateZ(37px);
transform: translateZ(37px);
}
#face8 {
-webkit-transform: translateX(37px) rotateY(90deg);
-moz-transform: translateX(37px) rotateY(90deg);
-ms-transform: translateX(37px) rotateY(90deg);
-o-transform: translateX(37px) rotateY(90deg);
transform: translateX(37px) rotateY(90deg);
}
#face9 {
-webkit-transform: translateX(-37px) rotateY(-90deg);
-moz-transform: translateX(-37px) rotateY(-90deg);
-ms-transform: translateX(-37px) rotateY(-90deg);
-o-transform: translateX(-37px) rotateY(-90deg);
transform: translateX(-37px) rotateY(-90deg);
}
#face10 {
-webkit-transform: translateZ(-37px);
-moz-transform: translateZ(-37px);
-ms-transform: translateZ(-37px);
-o-transform: translateZ(-37px);
transform: translateZ(-37px);
}
#face11 {
-webkit-transform: translateY(37px) rotateX(90deg);
-moz-transform: translateY(37px) rotateX(90deg);
-ms-transform: translateY(37px) rotateX(90deg);
-o-transform: translateY(37px) rotateX(90deg);
transform: translateY(37px) rotateX(90deg);
}
#face12 {
-webkit-transform: translateY(-37px) rotateX(-90deg);
-moz-transform: translateY(-37px) rotateX(-90deg);
-ms-transform: translateY(-37px) rotateX(-90deg);
-o-transform: translateY(-37px) rotateX(-90deg);
transform: translateY(-37px) rotateX(-90deg);
}
/** Définition du comportement de l'animation qui fera tourner le cube **/
@-webkit-keyframes rotate-cube
{
from { -webkit-transform: rotateY(0deg) rotateZ(0deg); }
to { -webkit-transform: rotateY(360deg) rotateZ(360deg); }
}
@keyframes rotate-cube
{
from { transform: rotateY(0deg) rotateZ(0deg); }
to { transform: rotateY(360deg) rotateZ(360deg); }
} |
Le code CSS suivant à été supprimé car déjà appelé dans le CSS du premier cube conteneur (Cf Comment lancer l'effet d'éclatement d'un cube 3D...)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .centered
{
/** On positionne le bloc au centre **/
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: -75px;
margin-top: -75px;
}
.stage
{
/* Application d'une perspective pour pouvoir avoir un rendu 3D */
-webkit-perspective: 700px;
-moz-perspective: 700px;
-ms-perspective: 700px;
-o-perspective: 700px;
perspective: 700px;
} |
Et j'ai ajouté le code HTML suivant
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div class="stage centered">
<div class="cube">
<img class="cubeface" id="face1" src="chemin/abeille150.jpg" />
<img class="cubeface" id="face2" src="chemin/consultant150.png" />
<img class="cubeface" id="face3" src="chemin/paul150.png" />
<img class="cubeface" id="face4" src="chemin/plouf150.gif" />
<img class="cubeface" id="face5" src="chemin/trinity150.gif" />
<img class="cubeface" id="face6" src="chemin/platine150.gif" />
</div>
<div class="cube1">
<img class="cubeface1" id="face7" src="chemin/paul75.png" />
<img class="cubeface1" id="face8" src="chemin/consultant75.png" />
<img class="cubeface1" id="face9" src="chemin/paul75.png" />
<img class="cubeface1" id="face10" src="chemin/consultant75.png" />
<img class="cubeface1" id="face11" src="chemin/paul75.png" />
<img class="cubeface1" id="face12" src="chemin/consultant75.png" />
</div>
</div> |
Le chiffre qui suffixe le nom de l'image indique le nombre de pixels
Merci pour toute aide :pingoin2:
