使用js从element的matrix推导transform的scale、rotate 和 translate参数-优快云博客

本文深入解析CSS中transform属性的数学原理，通过逆推公式揭示如何从矩阵中提取旋转角度、缩放比例及位移量。适用于前端开发者理解和调试复杂的页面布局效果。

transform

网上很多都只介绍了还原角度和缩放的参数，但是没有就偏移量的计算，自己还原了一下公式的意义，进行了公式的反推，具体的推到过程就不详叙了，可以参看w3c的矩阵含义。

直接上干货。

    function getElementCss(e, name)
    {
        var st = window.getComputedStyle(e, null);
        return st.getPropertyValue(name);
    }
    function getTransformPara(elem)
    {
        // var elem = document.getElementById(id);
        var tr = getElementCss(elem, "-webkit-transform");  
        if(tr!="none")
        {
            var values = tr.split("(")[1].split(")")[0].split(",");
            var a = values[0];
            var b = values[1];
            var c = values[2];
            var d = values[3];
            var e = values[4];
            var f = values[5];
            var scale1 = Math.sqrt(a * a + b * b);
            var scale2 = Math.sqrt(c * c + d * d);
            var angle = Math.atan2(b, a) * (180.0 / Math.PI);
            e = parseFloat(e);
            f = parseFloat(f);              
            var radian = -Math.PI/180.0*angle;
            var lastX = Math.cos(radian)*e - Math.sin(radian)*f;
            var LastY = Math.sin(radian)*e + Math.cos(radian)*f; 
            return {
                ScaleX: scale1,
                ScaleY: scale2,
                Angle: angle,
                MovX: lastX,
                MovY: LastY,
            };
        }
        else
        {
            return {
                ScaleX: 1,
                ScaleY: 1,
                Angle: 0,
                MovX: 0,
                MovY: 0,
            };
        }          
    }

转载于:https://www.cnblogs.com/chencarl/p/10149059.html