div의 translate3d 값을 가져 옵니까?

Question

는 DIV이이 적용되었습니다 말 :

-webkit-transform: translate3d(0px, -200px, 0px) 

내가 jQuery로 그 값을 검색 할 수있는 방법을

?

Answer 1

값은 z 값의 설정 여부에 따라 matrix 또는 matrix3d 중 하나로 저장됩니다. 다른 변형이 없다고 가정하면 2D 행렬에서 X와 Y는 마지막 두 값입니다. 3D 매트릭스의 경우 X, Y, Z, 1이 마지막 4 자리 숫자입니다. 이에 허용 대답 경기() 패턴을 변경하는 경우가 음수에 대한 지원이 추가

function getTransform(el) { 
    var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/) 

    if(!results) return [0, 0, 0]; 
    if(results[1] == '3d') return results.slice(2,5); 

    results.push(0); 
    return results.slice(5, 8); 
} 

Answer 2

편집 : 잘못 했으므로 무시하십시오.

나는

var styles = $('.myclass').css('-webkit-transform'); 

당신은 아마 translate3d(0px, -200px, 0px) 다시 얻을 것입니다 ... 당신이 뭔가를 할 경우 생각합니다.

그런 다음 해당 문자열을 구문 분석 할 수 있습니까? 조금은 해킹처럼 보입니다.

Answer 3

: 당신이 경우

$(el).css('-webkit-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+))\))/) 

Answer 4

당신은 값을 얻을 수있는 정규 표현식을 사용할 수 있습니다 정규 표현식을 다음과 같이 업데이트하십시오. 변환이 떠돌아 오르는 이상한 경우에 지원을 추가하십시오.

/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/