使用jquery获取元素的-webkit-transform的值

Question

我正在使用新的酷css3方法来操作div这样做的变换：

$("#thediv").css("-webkit-transform","translate(-770px, 0px)");

稍后在脚本中我想要获得这样的变换值：

$("#thediv").css("-webkit-transform");

它返回如下矩阵：矩阵（1,0,0,1，-770,0）

我无法弄清楚如何获得此矩阵的第5个值（-770）......

有什么建议吗？ 谢谢！

Answer 1

您的矩阵是一个4x4转换矩阵：

-770对应于 v _x 。要提取它，请构造一个WebkitCSSMatrix对象：

var style = window.getComputedStyle($('#thediv').get(0));  // Need the DOM object
var matrix = new WebKitCSSMatrix(style.webkitTransform);

console.log(matrix.m41);  // -770

Answer 2

我建议使用WebkitCSSMatrix对象。 http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/doc/uid/TP40009363

此对象具有矩阵元素的属性。它还为各种转换提供了便利功能。

Answer 3

获得矩阵字符串值的原因是jQuery的css函数正在获取计算样式（window.getComputedStyle($("#thediv")[0]).webkitTransform的结果）。

要获取您在上一个调用中设置的实际字符串值（“translate(-770px, 0px)”），您可以使用：

var t = $("#thediv")[0].style.webkitTransform;

由此可以使用字符串方法获取x值，例如：

t.substring(t.indexOf("(") + 1, t.indexOf(",") - 2)

给出了-770。但请注意，只有当您知道该值存在并且处于您正在使用的格式时（仅使用translate(xpx, ypx)，这是唯一可接受的，因为其他值有效！

如果您更喜欢使用计算样式，那么（要添加到@ Maz的建议），要获得第5个值（x变换），您可以这样做：

new WebKitCSSMatrix($("#thediv").css("-webkit-transform")).e;

要获得第六个（y转换），请使用矩阵的f属性。

Answer 4

由于我经常需要将jQuery与TweenMax一起使用，并且因为TweenMax已经处理了各种类型的转换字符串的所有解析以及兼容性问题，所以我写了一个小的jquery插件here（更多的是结束可以直接访问这些值的gsap's：

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

您可以获取/设置的属性列表及其初始属性：

perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0

从我的其他答案粘贴，希望这有帮助。

Answer 5

我编写了最简单的解决方案，它也适用于Safari，Chrome和Firefox：）

诀窍不是引用

.css("transform")

但是

.css("translate")

而是

属性：

var matrix = $("#thediv").css('translate');
console.log ( matrix[1] ); 
// matrix result is of form [x , y]
// so for example matrix[1] will give you the transformY value :)
$('html,body').animate({scrollTop: matrix[1]}, 750);

我很高兴能找到这样一个经济的解决方案，因为我同时在Firefox中处理webkit和2D变换中的3D变换，并且使用这种方法可以直接访问属性值：）