Nhận giá trị dịch3d của div?

Question

Nói một div đã này áp dụng cho nó:

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

Làm thế nào tôi có thể lấy những giá trị đó với jQuery?

Answer 1

Giá trị được lưu trữ dưới dạng matrix hoặc matrix3d, tùy thuộc vào giá trị z đã được đặt hay chưa. Giả sử không có biến đổi nào khác, đối với ma trận 2D, X và Y là hai giá trị cuối cùng. Đối với ma trận 3D, X, Y, Z, 1 là bốn chữ số cuối cùng.

Bạn có thể sử dụng một biểu thức chính quy để có được các giá trị:

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

EDIT: Điều này sai, bỏ qua điều này.

Tôi nghĩ rằng nếu bạn làm điều gì đó giống như ...

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

Bạn có lẽ sẽ nhận được translate3d(0px, -200px, 0px) lại.

Có thể bạn có thể phân tích cú pháp chuỗi đó? có vẻ như một chút của một hack mặc dù.

Answer 3

Nếu bạn thay đổi mô hình phù hợp() câu trả lời chấp nhận để này nó thêm hỗ trợ cho số âm:

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

Nếu bạn cập nhật biểu thức chính quy về sau nó thêm hỗ trợ cho những trường hợp lẻ đó khi biến đổi của bạn có nổi:

/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*))\))/