Как получить абсолютное значение translate3d?

Question

Как я мог бы преобразовать отрицательное значение translate3d в положительное число?

Например:

var val = $m('slider').style.webkitTransform; 
console.log(val); // this returns a number like: translate3d(-93px, 0, 0); 

Как бы идти о преобразовании значения в положительных чисел так, что мой выход:

translate3d(93px, 0, 0); // positive 93 

Answer 1

Это пример того, как вы могли бы разделить все из значения с использованием split, разбор целочисленных значений с использованием parseInt, а затем получение абсолютного значения с использованием abs()

Workin г скрипку: http://jsfiddle.net/bXgCP/

var mystr = "93px, 0, 10"; 

var myarr = mystr.split(","); 
var finalStr = ''; 

for (var i=0;i<myarr.length;i++) 
{ 

    myarr[i] = Math.abs(parseInt(myarr[i]),10); 
} 

finalStr = myarr.join(); // put the values back with the `,` format 

Answer 2

Лучше отслеживать также координатам JS, если вы можете, но если это не будет возможно, вам нужно parse out the individual values from the transform matrix ...

Demo

Если вы получаете вычисленный стиль (а не только .style собственности) преобразования с использованием getComputedStyle он возвращает матрицу:

// adapted from jQuery solution at https://stackoverflow.com/questions/7982053/get-translate3d-values-of-a-div 
function getTransform(el) { 
    var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform'); 
    var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/); 

    if(!results) return [0, 0, 0]; 
    if(results[1] == '3d') return results.slice(2,5); 

    results.push(0); 
    return results.slice(5, 8); // returns the [X,Y,Z,1] values 
} 


var translation = getTransform($m('slider')); 
var translationX = translation[0]; 
var absX = Math.abs(translationX); 

Answer 3

Ответ Адама есть ошибка: Это не может обрабатывать десятичные значения, как это:

matrix(1, 0, 0, 1, 100.000002649095, 100.000002649095) 

адаптированного регулярное выражение, чтобы его:

function getTransform(el) { 
    var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform'); 
    var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}.+))(?:, (-{0,1}.+))\))/); 

    if(!results) return [0, 0, 0]; 
    if(results[1] == '3d') return results.slice(2,5); 

    results.push(0); 
    return results.slice(5, 8); // returns the [X,Y,Z,1] values 
}