transform总结

Posted 2020-10-06

1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值，
优先使用dom.style.webKitTransform进行transform的读写

2. 从transform中读取translate的值方法

//jquery版本
function fGetTranslate($obj,type){
    var transformMatrix = obj.css("-webkit-transform") ||
                            obj.css("-moz-transform")    ||
                            obj.css("-ms-transform")     ||
                            obj.css("-o-transform")      ||
                            obj.css("transform");
    var matrix = transformMatrix.replace(/[^0-9\-.,]/g, ‘‘).split(‘,‘);
    var x = matrix[12] || matrix[4]; //translate x
    var y = matrix[13] || matrix[5]; //translate y
    if(type == ‘x‘){
        return x;
    }
    else if(type == ‘y‘){
        return y;
    }   
    return ‘‘;
}
//dom版本
function fGetTranslate(obj,type){
    var transform = obj.style.webkitTransform || obj.style.transform;
    var aTrans = transform.replace(/[^0-9\-.,]/g, ‘‘).split(‘,‘),
        res = ‘‘;
    switch(type){
        case ‘x‘:
            res = parseInt(aTrans[0]);
            break;
        case ‘y‘:
            res = parseInt(aTrans[1]);
            break;
        case ‘z‘:
            res = parseInt(aTrans[2]);
            break;
        default:
            break;
    } 
    return res || ‘‘;
}