如何获得 translate3d 的绝对值？答案

【问题标题】：How do I get the absolute value of translate3d?如何获得 translate3d 的绝对值？
【发布时间】：2013-03-15 09:16:24
【问题描述】：

如何将负 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

【问题讨论】：

通过“转换”，您是在要求绝对值还是什么？
是的，没错。
val = translat3(-93px, 0 , 0) 或只是 93px, 0, 0) ？
Math.abs(); w3schools.com/jsref/jsref_abs.asp
Math.abs(val);似乎不起作用。

标签： javascript css translate3d

【解决方案1】：

这是一个示例，说明如何使用 split 分隔所有值，使用 parseInt 解析整数值，然后使用 abs() 获取绝对值

工作小提琴：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

【讨论】：

【解决方案2】：

如果可以的话，最好在 JS 中跟踪你的坐标，但如果这不可能，你需要parse out the individual values from the transform matrix...

Demo

如果您使用getComputedStyle 获得转换的计算样式（不仅仅是.style 属性），它将返回一个矩阵：

// 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);

【讨论】：

嗨，我将如何动态地将这三个新的正坐标设置为新容器，例如：$clockcontainer.style.webkitTransform = (absX);
我基本上需要为另一个 div 设置正坐标，因为我在另一个 3dtransform 的相反位置移动
我不需要一个特定的坐标值，我需要所有三个值但设置为一个新的 div 以便它可以动态更改。
正如您在上面的答案中看到的，getTransform 函数返回数组中的 x、y 和 z 坐标。通过 Math.abs 运行这些值，你可以用它形成一个新的翻译。看看这个新小提琴jsfiddle.net/3gBYB/2

【解决方案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
}

【讨论】：

你在“-webkit-transform”中有错字空间