6
votes

La rotation de Firefox CSS diffère de la rotation chromée

Je veux faire un rectangle 3D (parallélépiped) que les utilisateurs peuvent bouger avec les flèches. Cela fonctionne bien en chrome, mais dans Firefox Certaines transitions (beaucoup en réalité) sont différentes de Chrome. Regardez Ce Fiddle (c'est mon code entier) et comparez-la dans les deux navigateurs pour mieux comprendre. Parce que le premier violon contient beaucoup de code, je le simplifierai et choisirai une transition étrange aléatoire. Regardez Ce Fiddle, puis appuyez sur le bouton "GAUCHE" ou la flèche gauche une fois. Cela fonctionne bien, mais lorsque vous l'appuyez à nouveau, le rectangle tourne 3 fois au lieu de 1 fois. P>

Est-ce un bug de firefox ou que dois-je vous tromper? p>

Le code ci-dessous est ce que vous trouverez dans le violon simplifié. P>

P >

<section class="container">
    <div id="box" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

javascript html css google-chrome firefox

1 commentaires

On dirait que vous n'utilisez pas -moz-transformer et -webkit-transformer pour Firefox et Chrome respectivement.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     On dirait que vous faites tout ce qui va bien, et les différences de rotation dans chrome vs firefox sont causées par la manière dont les deux navigateurs traitent CSS3. Lorsque vous regardez la rotation de  show-back-4  à  show-top-4 , votre fichier CSS spécifie la rotation à être  270deg . Dans Firefox, ça fait ça. Chrome, on dirait qu'elle optimise et ne fait pas la rotation complète, économisant sur la puissance de traitement ou quelque chose du genre. Alors oui, je pense que c'est juste une différence dans les navigateurs, pas un bogue dans l'un ou l'autre d'entre eux.                                 


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous pouvez essayer d'utiliser des images clés pour obtenir plus de contrôle pour l'animation, quelque chose comme ceci: 
  https: / /jsfiddle.net/l36v50kh/2/   p> 
 Je défini à la fois le point de départ et de fin de toutes les transitions du violon comme ceci:  p>  xxx  pré> 
 qui ressemble à la même chose dans les deux navigateurs, mais il est nerveux en cliquant sur le bouton avant la fin de l'animation.  P> 
 Vous pouvez également envisager d'animation avec JavaScript pour obtenir un contrôle exact et éviter de définir chaque transition, quelque chose comme ceci:  p> 
  p> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div id="box" class="show-front"><figure class="front">1</figure><figure class="back">2</figure><figure class="right">3</figure><figure class="left">4</figure><figure class="top">5</figure><figure class="bottom">6</figure></div>
</section>
<section id="options"><p><button id="left">Left</button><button id="right">Right</button></p></section>

                                

                                                                    
                                    
                                    
                                        7 commentaires
                                        
                                                                                            
                                                    Merci beaucoup pour votre réponse, la solution CSS CSS semble bonne, bien que je devais écrire beaucoup de code. J'ai aussi essayé quelque chose avec JavaScript, mais j'ai eu les mêmes résultats qu'avec CSS, certaines transitions ont l'air bizarre.                                                
                                                
                                                                                            
                                                    Personnellement, je préfère mon autre solution, comment pourrait-elle être améliorée pour mieux s'adapter à votre situation?                                                
                                                
                                                                                            
                                                    Le plus gros problème que j'ai eu lorsque j'ai essayé avec JavaScript, je ne pouvais pas comprendre un moyen de faire pivoter correctement le rectangle en utilisant l'axe Z. Je ne sais pas si les rotations sont relatives à la position rectangle actuelle ou à la position de départ, car de ce que j'ai fait, parfois ils semblaient les positions de départ, parfois à la position actuelle.                                                
                                                
                                                                                            
                                                    Les rotations sont relatives à 0 degrés. Ils sont appliqués une à la fois de l'objet afin que l'ordre des rotations importe. Vous serez peut-être confondus avec la rotation locale du VS locale (devinez de vous nommer le bouton "GAUCHE" au lieu de "Y-").                                                
                                                
                                                                                            
                                                     jsfiddle.net/kfqzm9xx  est ce que j'ai fait avec JavaScript, le problème, comme je l'ai dit, est-ce que c'est que Je ne peux pas comprendre une règle pour que j'ai besoin de faire pivoter Z axe, plus des rotations sont correctes, d'autres allez à droite lorsque j'appuie à gauche ou inversement (voir flèche vers le haut -> flèche vers le haut -> flèche gauche ==> ça va à droite).                                                
                                                
                                                                                            
                                                    L'objet est tourné le long de son axe local X et Y non "laissé" ou "up".  Cela illustre la différence. (En appuyant sur la droite, le tourne toujours vers la direction de la flèche R)  Google "matrice de rotation" pour obtenir beaucoup de lecture. Ou vous pouvez utiliser la solution clé-clé (ou implémenter une solution similaire dans JS, c'est-à-dire une prédéfinie une rotation pour chaque face) si vous n'avez besoin que de multiples de 90 degrés. Si vous décidez d'aller pour la solution CSS, vous devriez probablement utiliser SASS pour réduire certains du code.                                                
                                                
                                                                                            
                                                    Essayé maintenant avec les images clés CSS, mais malheureusement couru dans le même problème, Firefox semble "bugged". Bien que la base clé "top-2-back-4" lui dit d'aller de "rotatex (270deg) rotate (-90deg)" à "rotatex (270deg) rotatex (-90deg) rotatex (-90deg)", en rotation x -90 Deg It le tourne 270 degrés. Exemple Fiddle  jsfiddle.net/1agp0nnw                                                 
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    3
 votes
                                
                            
                            
                                
                                     Basé sur l'hypothèse que Firefox est juste buggy à cet égard (voir analyse ci-dessous),  Voici une solution de contournement  qui fonctionne sur Firefox. Il enveloppe l'élément  #box  code> dans un autre  div  code> et transition uniquement l'emballage. Et l'emballage ne fait jamais pivoter que 90 degrés du point de départ dans une direction à la fois, Firefox ne peut donc pas le gâcher. 
 Une fois la transition terminée, la rotation est réinitialisée à la position de départ et simultanément à l'intérieur. La boîte est tournée vers la nouvelle position, à la fois sans transition, la modification n'est donc pas visible.  P> 
 Le deuxième changement important utilise la transformation calculée actuelle de  #box  code> et ajout de la rotation Pour cela, de sorte que nous n'avons pas à suivre les rotations comme nous allons.  p> 
 Notez que l'ordre des rotations importe. Pour atteindre ce que vous essayez de faire (faire tourner dans "l'espace mondial" plutôt que "espace d'objet"), vous devez appliquer les rotations dans l'ordre inverse. Par exemple. Pour faire pivoter "à droite", utilisez  .CSS ("transformer" "," Totatey (90DEG) "+ courantCompuTheDTransform)  code>. Cela résoudra le problème que vous avez mentionné dans des commentaires où il semble tourner autour du mauvais axe. Voir ci-dessous pour plus d'informations.  P> 
 Notez également que je ne permettez pas à une rotation de commencer s'il y en a déjà en cours, car cela ne fonctionnera pas. Vous pouvez faire la queue des frappes de frappe dans un tableau si vous souhaitez être capable de cela, mais vous voudrez peut-être également réduire la durée de transition proportionnelle à la longueur de la file d'attente dans ce cas afin de ne pas prendre pour toujours.  P> 
 mise à jour. Fiddle:  https://jsfiddle.net/955K5FHH/7/   P> 
 JavaScript pertinent:  p> 
var rots = [];
var tr = "translateZ(-50px)";

function transform() {
    var tf = "translateZ(-50px)";
    rots.forEach(function(rot) {
        tf += " rotate" + rot[0] + "(" + rot[1] + "deg)";
    });
    console.log(tf);
    $("#box").css("transform", tf);
}

function addRot(axis,angle) {
    if (rots.length==0 || rots[0][0]!=axis) {
        rots.unshift([axis,angle]);
    } else {
        rots[0][1]+=angle;
    }
    transform();
}

$('#up').bind('click', function() {
    addRot('X',90);
});

$('#down').bind('click', function() {
    addRot('X',-90);
});

$('#right').bind('click', function() {
    addRot('Y',90);
});

$('#left').bind('click', function() {
    addRot('Y',-90);
});

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Merci beaucoup, votre solution est parfaite. Compatibilité croisée croisée, facile à comprendre, moins de code que j'avais initialement, exactement ce que je voulais.