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

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