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 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
 
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 : 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
.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 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
 
   <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