transform - Comment conserver les axes de coordonnées inchangés lors de plusieurs transformations de la transformation 3D CSS3, ou existe-t-il un algorithme matriciel qui peut y parvenir ?

Question

J'ai construit un cube en CSS3 et je souhaite utiliser la souris pour contrôler la rotation du cube (axe X et axe Y)

Voir la page

Le code de base de la rotation ressemble probablement à ceci :

    var box = $("#box"); //box是3D对像的容器;
    var option_n = 0.5; //灵敏度
    box.on('mousedown',function(e){
        if(e.button === 0){
            mouse_left(e);
            return false;
        }
    })
    function mouse_left(e){ //合并旋转值,有bug
        var x,y;
        var zb_b = [e.pageX,e.pageY];
        var oldt = box.css('transform');
        $(document).on('mousemove.dh',function(e){
            var zb_e = [e.pageX,e.pageY];
            y = ((zb_e[0] - zb_b[0]) * option_n);
            x = (-(zb_e[1] - zb_b[1]) * option_n);
            var transform = 'rotateY('+y+'deg)' +' rotateX('+x+'deg)';
            dom.css('transform',oldt + transform);
        }).on('mouseup.dh',function(e){
            $(document).off('mousemove.dh');
            $(document).off('mouseup.dh');
        })
    }

Le problème est le suivant. Il n'y a pas de problème dans la première opération, mais il y aura des problèmes plus tard. La raison est que l'opération de rotation semble faire pivoter tout l'axe de coordonnées, provoquant des problèmes dans les rotations suivantes.

Il y a un bouton "changement de mode" sur la page. L'effet après le changement est ce que je veux, mais cette implémentation nécessite que deux nœuds parents soient imbriqués pour chaque rotation et que les nœuds parents soient pivotés pour obtenir l'effet après plusieurs contrôles. , le niveau DOM sera très profond, ce qui n'est définitivement pas possible.

Je voudrais demander au maître de me donner quelques conseils

Answer 1

http://runjs.cn/code/urduzcae

var transformChage = top.transformChage = function(dom,transform){
    var oldt = dom.css('transform');
    oldt = oldt == "none" ? "" : oldt+" ";
    dom.css('transform', transform + oldt)
}

Changez-le simplement à gauche.

---

Pour comprendre ce problème, vous n'avez pas besoin d'en savoir beaucoup sur les matrices. Vous pouvez traiter l'implémentation des matrices comme une boîte noire et jeter un œil à l'ordre de calcul des matrices et à l'impact des matrices parent-enfant :

Calculer la matrice de transformation accumulée matrice de transformation 3D accumulée

À partir de la matrice d'identité, pour chaque élément depuis l'élément racine du contexte de rendu 3D (chaque élément déclaré preseve-3d) jusqu'à l'élément courant :

1. Matrice de transformation cumulative multipliée par la matrice de perspective sur son bloc contenant

2. La matrice de transformation cumulée est multipliée par la matrice de déplacement horizontal et vertical du bloc actuel par rapport à son bloc contenant

3. Matrice de transformation cumulative multipliée par matrice de transformation

Jusqu'à ce que l'élément actuel soit calculé, la matrice de transformation cumulative finale est obtenue.

——W3C CSS Transform WD : 6.1 Rendu de transformation 3D

Ce à quoi vous devez faire attention, c'est l'étape 3. Selon cette norme, si nous voulons effectuer une telle transformation, la transformation de gauche est :

Bien sûr, si vous êtes intéressé par l'implémentation matricielle, je l'ai également brièvement présentée dans "Transformation Matrix in the Front End". Le cœur de ce problème est que la multiplication matricielle ne respecte pas la loi commutative de la multiplication dans la plupart des cas.