Cara mengonversi matriks transformasi CSS kembali ke properti komponennya

Saya telah memperoleh matriks transformasi CSS suatu elemen dengan menggunakan metode getComputedStyle() sebagai berikut.

var style = window.getComputedStyle(elem1, null);
var trans = style.transform;

trans = matriks(1, 0, 0, 1, 1320, 290)

Apakah ada cara untuk menghitung kembali matriks transformasi untuk mendapatkan aturan CSS asli yaitu. nilai untuk menerjemahkan, memutar, memiringkan properti. Saya berasumsi ini dapat dihitung dengan membalikkan metode yang digunakan untuk membentuk matriks. P.S. - Nilai properti transformasi diberikan dalam persentase, saya ingin menghitung kembali nilai persentase ini dari matriks.

Transformasi CSS - transform: translate(200%, 500%);


person Dan Philip    schedule 28.03.2017    source sumber


Jawaban (1)


Ya, hal itu mungkin dilakukan!

Parameter matriks berada dalam urutan berikut: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Baca lebih lanjut tentang hal ini di sini

Jika Anda ingin mengambil angka dari string itu (matriks(1,0,0,1,720,290) Anda dapat menggunakan ekspresi reguler ini:

style = window.getComputedStyle(elem1, null);
trans = style.transform;
numberPattern = /-?\d+\.?\d*/g;

values = trans.match( numberPattern );

Ini akan mengembalikan array berikut:

["1", "0", "0", "1", "720", "290"]

Edit setelah komentar

Nilai yang dikembalikan di window.getComputedStyle adalah nilai yang dihitung (yaitu persentase yang Anda gunakan diurai menjadi nilai piksel). Anda dapat membalikkan perhitungan itu, tetapi Anda perlu mengetahui persentase yang digunakan untuk mengetahui berapa banyak piksel yang seharusnya.

Masukkan Transformasi CSS3

Satu hal yang menarik tentang transformasi CSS adalah, ketika menerapkannya dengan nilai persentase, mereka mendasarkan nilai tersebut pada dimensi elemen tempat mereka diterapkan, dibandingkan dengan properti seperti top, right, bottom, left, margin, dan padding. , yang hanya menggunakan dimensi induknya (atau dalam hal pemosisian absolut, yang menggunakan induk relatif terdekatnya). Sumber

jika Anda menggunakan perhitungan berikut, Anda seharusnya bisa mendapatkan persentase yang Anda gunakan:

style = window.getComputedStyle(elem1, null);
trans = style.transform;
numberPattern = /-?\d+\.?\d+|\d+/g;

values = trans.match( numberPattern );

computedTranslateX = values[4];
computedTranslatey = values[5];

xPercentage = (computedTranslateX / elem1.offsetWidth) * 100;
yPercentage = (computedTranslateY / elem1.offsetHeight) * 100;
person Douwe de Haan    schedule 28.03.2017
comment
Saya tidak ingin nilai dalam matriks. Saya ingin nilai yang saya berikan di CSS sebagai properti terjemahan, putar, dan miring. - person Dan Philip; 28.03.2017
comment
Bisakah Anda memposting CSS Anda sehingga saya dapat melihat nilai apa yang Anda harapkan untuk diperoleh kembali? - person Douwe de Haan; 28.03.2017
comment
Untuk menangkap nilai negatif, pertimbangkan untuk menggunakan pola: /-?\d+/g; - person Deliaz; 11.07.2019
comment
Ini berfungsi dengan baik, namun saya mengalami kasus yang sulit; Safari sering mengembalikan nilai dengan eksponen yaitu -2.544326192711535e-16. Regexp numberPattern akan membagi ini menjadi dua pertandingan seperti [2.544326192711535, 16] - person Benjamin; 06.01.2020
comment
@Benjamin Anda benar sekali. Saya mencari tahu apa yang dapat saya lakukan untuk membuatnya berfungsi, tetapi sepertinya saya memerlukan beberapa pengujian lagi sebelum saya dapat memperbarui jawaban saya. Jika Anda ingin memiliki beberapa kode yang dapat Anda gunakan, lihat postingan ini untuk mendapatkan panduan bantuan. - person Douwe de Haan; 06.01.2020
comment
@DouwedeHaan Terima kasih. Untuk perbaikan cepat saya menggunakan style.transform.split(/matrix\(|,|\)/).filter(v => v !== '') - person Benjamin; 06.01.2020