Получить значение -webkit-transform элемента с jquery

Ответ 1

Ваша матрица представляет собой матрицу преобразования 4x4:

The -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

Ответ 2

Вы можете разбить строку на массив и получить требуемое значение, как обычно. Здесь немного вспомогательной функции, которая разделяет часть.

function matrixToArray(str) {
  return str.match(/\d+/g);
}

Обновление

Чтобы сохранить десятичные знаки: rgba(0, 0, 0, 0.5)

и негативы: matrix(1, 0, 0, 1, -770, 0)

function matrixToArray(str) {
  return str.split('(')[1].split(')')[0].split(',');
}

Update2

RegExp, которое сохраняет десятичные и отрицательные числа:

function matrixToArray(str) {
  return str.match(/(-?[0-9\.]+)/g);
}

matrixToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5']
matrixToArray('matrix(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0']

Ответ 3

Я бы рекомендовал использовать объект WebkitCSSMatrix. http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/doc/uid/TP40009363

Этот объект имеет в качестве своих атрибутов элементы матрицы. Он также предоставляет удобные функции для различных преобразований.

Ответ 4

Причина, по которой вы получаете значение строки матрицы, заключается в том, что функция 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 для матрицы.

Ответ 5

Поскольку мне постоянно нужно использовать jQuery вместе с TweenMax, и поскольку TweenMax уже позаботился обо всех синтаксических анализах различных типов строк преобразования, а также о проблемах совместимости, я написал крошечный плагин jquery здесь (больше обтекания gsap), которые могут напрямую обращаться к этим значениям следующим образом:

$('#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

Вставьте из моего другого ответа, надеюсь, что это поможет.

Ответ 6

Я закодировал простейшее решение, которое ТАКЖЕ работает в 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);

Я рад, что нашел такое экономичное решение, так как я имел дело с 3D-преобразованиями в webkit и 2D-преобразованиях в Firefox одновременно, и используя этот метод, к свойствам свойств можно получить доступ напрямую:)