Comment lancer l'effet d'éclatement d'un cube 3D selon une certaine fréquence

**informer** · 26/11/2016, 16h59

Bonjour à tous,

J'ai sans aucune vergogne copier-coller le code proposé par yuyazz sur copier-coller pour ajouter un cube 3D avec un effet d'éclatement quand on passe le curseur dessus (:hover).

Mais j'aimerais également activer cet effet d'éclatement selon une certaine fréquence.

Voici mon code actuel

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
body
{
    /*background-image: url('img/texture.jpg');*/
}
 
.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;
}
 
    .cube
    {
        position: absolute;
        width: 150px;
        height: 150px;
 
        /* 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, ...)
            **/
        .cubeface
        {
            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
            **/
        #face1 {
            -webkit-transform: translateZ(75px);
            -moz-transform: translateZ(75px);
            -ms-transform: translateZ(75px);
            -o-transform: translateZ(75px);
            transform: translateZ(75px);
        }
        #face2 {
            -webkit-transform: translateX(75px) rotateY(90deg);
            -moz-transform: translateX(75px) rotateY(90deg);
            -ms-transform: translateX(75px) rotateY(90deg);
            -o-transform: translateX(75px) rotateY(90deg);
            transform: translateX(75px) rotateY(90deg);
        }
        #face3 {
            -webkit-transform: translateX(-75px) rotateY(-90deg);
            -moz-transform: translateX(-75px) rotateY(-90deg);
            -ms-transform: translateX(-75px) rotateY(-90deg);
            -o-transform: translateX(-75px) rotateY(-90deg);
            transform: translateX(-75px) rotateY(-90deg);
        }
        #face4 {
            -webkit-transform: translateZ(-75px);
            -moz-transform: translateZ(-75px);
            -ms-transform: translateZ(-75px);
            -o-transform: translateZ(-75px);
            transform: translateZ(-75px);
        }
        #face5 {
            -webkit-transform: translateY(75px) rotateX(90deg);
            -moz-transform: translateY(75px) rotateX(90deg);
            -ms-transform: translateY(75px) rotateX(90deg);
            -o-transform: translateY(75px) rotateX(90deg);
            transform: translateY(75px) rotateX(90deg);
        }
        #face6 {
            -webkit-transform: translateY(-75px) rotateX(-90deg);
            -moz-transform: translateY(-75px) rotateX(-90deg);
            -ms-transform: translateY(-75px) rotateX(-90deg);
            -o-transform: translateY(-75px) rotateX(-90deg);
            transform: translateY(-75px) rotateX(-90deg);
        }
 
        /** Si le .cube est en :hover, on change la translation de chaque face
            pour qu'elles aillent un peu plus loin, et ainsi donner un
            effet d'explosion du cube
            **/
        .cube:hover > #face1 {
            -webkit-transform: translateZ(150px);
            -moz-transform: translateZ(150px);
            -ms-transform: translateZ(150px);
            -o-transform: translateZ(150px);
            transform: translateZ(150px);
        }
        .cube:hover > #face2 {
            -webkit-transform: translateX(150px) rotateY(90deg);
            -moz-transform: translateX(150px) rotateY(90deg);
            -ms-transform: translateX(150px) rotateY(90deg);
            -o-transform: translateX(150px) rotateY(90deg);
            transform: translateX(150px) rotateY(90deg);
        }
        .cube:hover > #face3 {
            -webkit-transform: translateX(-150px) rotateY(-90deg);
            -moz-transform: translateX(-150px) rotateY(-90deg);
            -ms-transform: translateX(-150px) rotateY(-90deg);
            -o-transform: translateX(-150px) rotateY(-90deg);
            transform: translateX(-150px) rotateY(-90deg);
        }
        .cube:hover > #face4 {
            -webkit-transform: translateZ(-150px);
            -moz-transform: translateZ(-150px);
            -ms-transform: translateZ(-150px);
            -o-transform: translateZ(-150px);
            transform: translateZ(-150px);
        }
        .cube:hover > #face5 {
            -webkit-transform: translateY(150px) rotateX(90deg);
            -moz-transform: translateY(150px) rotateX(90deg);
            -ms-transform: translateY(150px) rotateX(90deg);
            -o-transform: translateY(150px) rotateX(90deg);
            transform: translateY(150px) rotateX(90deg);
        }
        .cube:hover > #face6 {
            -webkit-transform: translateY(-150px) rotateX(-90deg);
            -moz-transform: translateY(-150px) rotateX(-90deg);
            -ms-transform: translateY(-150px) rotateX(-90deg);
            -o-transform: translateY(-150px) rotateX(-90deg);
            transform: translateY(-150px) 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); }
}

Et le code

Code HTML :

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

1
2
3
4
5
6
7
8
                     <div class="cube">
                        <img class="cubeface" id="face1" src="votreURL/abeille150.jpg"/>
                        <img class="cubeface" id="face2" src="votreURL/consultant150.png"/>
                        <img class="cubeface" id="face3" src="votreURL/paul150.png"/>
                        <img class="cubeface" id="face4" src="votreURL/plouf150.gif"/>
                        <img class="cubeface" id="face5" src="votreURL/trinity150.gif"/>
                        <img class="cubeface" id="face6" src="votreURL/platine150.gif"/>
                     </div>

Merci pour votre aide

**NoSmoking** · 27/11/2016, 09h59

Bonjour,
si tu souhaites conserver les deux « fonctionnalités » éclatement sur le over et éclatement à une fréquence donnée il me semble que le mieux est de passer par un setInterval en javascript.

Pour cela il te faut ajouter, pour ton élément <div class="cube">, une class, par exemple eclate, sur tes sélecteurs :

Code :

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

1
2
3
4
.cube.eclate > #face1,
.cube:hover > #face1 {
    transform: translateZ(220px);
}

et de gérer le changement de class via un classListToggle en javascript donc :

Code javascript :

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

1
2
3
4
5
function eclate(){
  var oElem = document.querySelector(".cube");
  oElem.classList.toggle("eclate");
}
var iTimer = setInterval( eclate, 1000);

**informer** · 27/11/2016, 11h42

Bonjour NoSmoking

Une nouvelle fois merci pour tes précieux conseils.

Juste une question, le code JS est il à ajouter dans le document.ready?

Merci encore

**NoSmoking** · 27/11/2016, 15h43

En l'état du code que je t'ai proposé il te faut le mettre une fois le DOM construit, si tu veux pouvoir le mettre n'importe où dans ta page il faut le modifier pour tenir compte de la présence effective de l'élément.

Code javascript :

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

1
2
3
4
5
6
var iTimer = setInterval(function () {
    var oElem = document.querySelector('.cube');
    if (oElem) {
        oElem.classList.toggle('eclate');
    }
}, 1000);

**informer** · 27/11/2016, 16h26

Pour d'autres besoins j'ai créé un fichier JS appelé dans la page qui a entre autre document.ready. Je pensais inclure ton code dans le document.ready, bonne idée?

Merci pour ton aide

**NoSmoking** · 28/11/2016, 12h19

Je pensais inclure ton code dans le document.ready, bonne idée?

le code que je t'ai mis pourra fonctionner quelque soit sa position dans ta page.
Il est tout à fait convenable de ne lancer le script qu'une fois la page chargée et en cela tu peux tout à fait le mettre à cet endroit.

Comme tu utilises jQuery, d'après un de tes posts, autant « jQueriser » ton code comme ceci

Code javascript :

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

1
2
3
4
var iTimer = setInterval( 
   function (){
      $(".cube").toggleClass("eclate");
   }, 1000);

Bonus : Qu'est-ce que la notion de Ready ?

**informer** · 28/11/2016, 14h04

Comme toujours une solution 100% efficace

Merci une nouvelle fois pour ton aide

PS: Surement à très bientôt sur le post: Comment insérer un cube 3D dans un autre cube 3D

**informer** · 28/11/2016, 15h19

NoSmoking

Aurais-tu une idée du pourquoi de l'affichage dans IE d'une seule une face du cube ?

Merci par avance

**NoSmoking** · 30/11/2016, 20h00

Aurais-tu une idée du pourquoi de l'affichage dans IE d'une seule une face du cube ?

Aux dernières nouvelles IE ne reconnaît pas preserve-3D et dysfonctionne sur certains autres points.

**informer** · 30/11/2016, 22h53

Merci pour ta réponse NoSmoking

Comment lancer l'effet d'éclatement d'un cube 3D selon une certaine fréquence

CSS

Discussions similaires

Partager

Partager