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

时间:2011-05-11 17:30:36

标签: jquery html5 css3 webkit

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

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

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

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

它返回如下矩阵:矩阵(1,0,0,1,-770,0)

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

有什么建议吗? 谢谢!

5 个答案:

答案 0 :(得分:44)

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

matrix stuff

-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

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

获得矩阵字符串值的原因是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属性。

答案 3 :(得分:2)

由于我经常需要将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

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

答案 4 :(得分:-1)

我编写了最简单的解决方案,它也适用于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变换,并且使用这种方法可以直接访问属性值:)