Discussion :

[ciocciu]

Bonjour , j'ai un dé très sympa , mais je souhaiterais le faire rouler un peu plus avant de s'arrêter sur sa face .

j'ai tenté un transforme rotate avant le lancé mais ça ne fonctionne pas (ou alors qu'au 1er lancé).

voici le fiddle

https://jsfiddle.net/Lrgy96a8/

si quelqu'un a une idée je prends .

Merci d'avance

[gabi7756]

Bonjour,
Très pratique le jsfidle

Pour résumé j'ai fait trois petit changement :
- CSS, ajout d'une classe qui fait rouler le Dé
- Js : Ajout de la classe puis suppression au bout de x secondes

Dans le css tu règle la vitesse pour faire rouler le dé , augmente la durée = baisse de la vitesse.
Sinon tu peux aussi changer les rotates, j'ai juste pris les valeurs pour une face ( Dé 4 x=720 / y=810 ) que j'ai multiplié par 4. C'est pas obligé franchement, tu peux mettre ce que tu veux je pense

Code CSS :

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

1
2
3
4
5
 
.spinning {
   transition: transform 1.5s ease-in-out !important;
    transform: translateZ(-100px) rotateY(3240deg) rotateX(2880deg) !important;
}

Code js :

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
 
$("#spin").click(function(e) {
    e.preventDefault();
    document.getElementById("dice").classList.add("spinning");
 
    rnd = Math.floor(Math.random() * 6 + 1);
    let x, y;
    switch (rnd) {
        case 1:
        x = 720;
        y = 810;
        break;
        case 6:
        x = 720;
        y = 990;
        break;
        default:
        x = 720 + (6 - rnd) * 90;
        y = 900;
        break;
    }
    setTimeout(function() {
        document.getElementById("dice").classList.remove("spinning");
    }, 1000); // Durée de la transition 
    $(".dice").css(
        "transform",
        "translateZ(-100px) rotateY(" + x + "deg) rotateX(" + y + "deg)"
        );
    });

Cdt,

[ciocciu]

ce qui est surtout très pratique et très sympa ce sont les gens qui prennent le temps de répondre .
Merci beaucoup donc pour ta réponse , effectivement la création d'une classe d'animation css et son activation en js est évidente une fois qu'on a lu ta proposition....
merci encore

[gabi7756]

Tant que ca te convient it's good, pas de quoi .

Tu peux le faire sans class aussi, c'est ce qui est bien avec js , tant que tu as de l'inspi tu peux bidouiller
Oublie pas de cliquer sur si jamais ton problème est réglé

[NoSmoking]

Bonjour,

- Js : Ajout de la classe puis suppression au bout de x secondes

il existe une façon élégante de faire cela et sans utiliser l'approximatif setTimeout, c'est d'utiliser l'événement transitionend déclenché en fin de transition. On a donc une « parfaite » synchronisation.

Code :

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

1
2
3
4
5
const elDice = document.getElementById("dice");
elDice.ontransitionend = (e) => {
  console.log("transition terminée après %fs", e.elapsedTime);
}
// le code déclencheur

Ressource :

Document: évènement transitionend