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

Question

Я манипулирую div с новым классным способом css3 сделать преобразование следующим образом:

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

Позже в скрипте я подумал получить значение преобразования следующим образом:

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

Возвращает матрицу, подобную этой: matrix (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

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

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(',');
}

Обновление2

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']

Answer 3

Поскольку мне постоянно нужно использовать 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

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

Answer 4

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

Чтобы получить шестое значение (* 1023)* transform) вы используете f свойство матрицы.

Answer 5

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

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

Answer 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 одновременно, и используя этот метод, можно напрямую получить доступ к значениям свойств:)