原生js获取Css3中transform的translate参数x,y,z轴值及旋转角度rotate值的方法

Css3中transform的translate参数，可以控制内容的位置、角度旋转等的显示情况，在手机端界面非常实用（当然不限于手机端）。

设置容易，反读取这些参数属性值却不容易，不过还是有办法的，下面放出两个原生js的方法，用于获取Css3中transform的translate参数x,y,z轴值及旋转角度rotate值。

                //获取transform值
，注意看第二个参数值
                function GetTranslate(node, sty) {
                    var translates = doc.defaultView.getComputedStyle(node, null).transform.substring(7);
                    var result = translates.match(/\(([^)]*)\)/);// 正则()内容
                    var matrix = result ? result[1].split(',') : translates.split(',');
                    if (sty == "x" || sty == undefined) {
                        return matrix.length > 6 ? parseFloat(matrix[12]) : parseFloat(matrix[4]);
                    } else if (sty == "y") {
                        return matrix.length > 6 ? parseFloat(matrix[13]) : parseFloat(matrix[5]);
                    } else if (sty == "z") {
                        return matrix.length > 6 ? parseFloat(matrix[14]) : 0;
                    } else if (sty == "rotate") {
                        return matrix.length > 6 ? getRotate([parseFloat(matrix[0]), parseFloat(matrix[1]), parseFloat(matrix[4]), parseFloat(matrix[5])]) : getRotate(matrix);
                    }
                }
                //获取Rotate值
，自己调整使用
                function getRotate(matrix) {
                    var aa = Math.round(180 * Math.asin(matrix[0]) / Math.PI);
                    var bb = Math.round(180 * Math.acos(matrix[1]) / Math.PI);
                    var cc = Math.round(180 * Math.asin(matrix[2]) / Math.PI);
                    var dd = Math.round(180 * Math.acos(matrix[3]) / Math.PI);
                    var deg = 0;
                    if (aa == bb || -aa == bb) {
                        deg = dd;
                    } else if (-aa + bb == 180) {
                        deg = 180 + cc;
                    } else if (aa + bb == 180) {
                        deg = 360 - cc || 360 - dd;
                    }
                    return deg >= 360 ? 0 : deg;
                }

下面这个方法是用于控制页面上的内容往上滑动一定高度后显示固定表头的代码示例：

var top = GetTranslate(scrollBody, "y");
                    if (top  < 45) {
                        div.style.display = '';
                    } else {
                        div.style.display = 'none';
                    }

---

以上就是知道不介绍的《原生js获取Css3中transform的translate参数x,y,z轴值及旋转角度rotate值的方法》，希望对你有所帮助。

下一篇讲讲css3中transform的translate是什么