Bolehkah Terjemah Sendiri Meniru Sempurna CSS Transform-Origin?

Simulating Transform-Origin Menggunakan Terjemahan: Menyelesaikan Penskalaan dan Sisihan Putaran

Dalam CSS, sifat transform-origin membenarkan kedudukan tepat elemen transformasi di sekitar titik tertentu. Walau bagaimanapun, mereplikasi fungsinya hanya menggunakan transformasi: terjemah boleh menimbulkan cabaran, terutamanya apabila menggabungkannya dengan skala dan transformasi putaran.

Menurut dokumentasi MDN, mensimulasikan asal-transformasi dengan terjemah melibatkan:

1. Menegakkan nilai asal-ubah yang ditentukan dan menggunakannya sebagai parap terjemahan.
2. Menggunakan transformasi yang diingini.
3. Menterjemah kembali elemen dengan nilai yang diubah asal.

Walaupun mengikuti pendekatan ini, pembangun biasanya menemui hasil yang salah apabila mencuba untuk meniru tingkah laku asal-ubah. Berikut ialah sebab di sebalik percanggahan ini:

1. Penyongsangan Terjemahan:

Kod CSS yang disediakan termasuk ralat dalam susunan terjemahan dalam kelas .translate. Untuk mensimulasikan asal-ubah dengan betul, terjemahan awal dan akhir hendaklah diterbalikkan. Berikut ialah kod yang disemak:

.translate {
  transform: translate(100px, 100px) translate(100px, 0px) scale(2) rotate(45deg) translate(-100px, -100px);
}

2. Pelarasan Transform-Origin:

Isu lain terletak pada sifat transform-origin kelas .translate. Secara lalai, asal-ubah ditetapkan ke tengah (50% 50%). Walau bagaimanapun, untuk memadankan kelakuan asal-ubah, kita perlu mengalihkan titik rujukan ini ke sudut kiri atas (0 0) elemen.

.translate {
  transform-origin: 0 0;
  ...
}

Dengan menggabungkan pengubahsuaian ini, kita boleh mencapai simulasi yang tepat dari transform-origin menggunakan translate. Pembetulan ini harus menyelesaikan ketidakkonsistenan dalam skala dan putaran yang diperhatikan dalam kod CSS asal.

Atas ialah kandungan terperinci Bolehkah Terjemah Sendiri Meniru Sempurna CSS Transform-Origin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!