transform - Wie kann ich die Koordinatenachsen bei mehreren Transformationen der 3D-Transformation von CSS3 unverändert lassen, oder gibt es einen Matrixalgorithmus, der dies erreichen kann?

Question

Ich habe einen Würfel mit CSS3 erstellt und möchte die Drehung des Würfels (X- und Y-Achse) mit der Maus steuern

Seite anzeigen

Der Kerncode der Rotation sieht wahrscheinlich so aus:

    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');
        })
    }

Beim ersten Vorgang gibt es kein Problem, aber es wird später Probleme geben. Der Grund dafür ist, dass der Rotationsvorgang die gesamte Koordinatenachse dreht, was zu Problemen bei nachfolgenden Drehungen führt

Es gibt eine Schaltfläche „Moduswechsel“ auf der Seite. Der Effekt nach dem Wechsel ist genau das, was ich möchte, aber diese Implementierung erfordert, dass bei jeder Drehung zwei übergeordnete Knoten verschachtelt werden und die übergeordneten Knoten gedreht werden, um den Effekt zu erzielen , die DOM-Ebene wird sehr tief sein, was definitiv nicht möglich ist.

Ich möchte den Meister bitten, mir einen Rat zu geben

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)
}

改成左乘即可。

---

理解这个问题，不需要了解太多矩阵的知识，可以把矩阵实现当成黑盒，来看一下矩阵计算顺序和父子矩阵影响：

计算累计变换矩阵 accumulated 3D transformation matrix

从单位矩阵开始，对于从3D渲染上下文(每个声明了preseve-3d的元素)的根元素到当前元素的每一个包含快：

1. 累积变换矩阵乘以其包含块上的perspective矩阵

2. 累积变换矩阵乘以当前块相对其包含块的水平、垂直位移矩阵

3. 累积变换矩阵乘以变换矩阵

直到计算到当前元素，得到最终累积变换矩阵。

——W3C CSS Transform WD: 6.1 3D Transform Rendering

需要关注的是第3步，按照这样的标准，如果我们要做出这样的变换，左侧变换即是：

当然，如果对矩阵实现感兴趣，我也在《前端中的变换矩阵》中粗浅地介绍了。这个问题的核心是矩阵乘法在大部分情况下都不符合乘法交换律。