Bolehkah Terjemah Menggantikan Transform-Origin?

Simulating Transform-Origin Menggunakan Terjemah: Membongkar Rahsia

Sifat transform-origin CSS menawarkan kawalan yang tiada tandingan ke atas titik asal untuk transformasi. Walau bagaimanapun, anda boleh meniru fungsinya dengan bijak menggunakan transformasi tulen: terjemah jika anda mengikuti langkah berikut:

1. Terjemahan Songsang:

Bertentangan dengan percubaan asal anda, anda mesti menyongsangkan nilai terjemah untuk mencapai hasil yang betul. Ini kerana terjemah mentafsir nilai positif sebagai bergerak ke kanan atau ke bawah, manakala ukuran asal-ubah dari sudut kiri atas.

2. Jajarkan Asal Ubah:

Asal Ubah lalai ditetapkan ke tengah elemen. Agar simulasi anda berfungsi dengan betul, selaraskan asal-ubah unsur yang anda ubah menggunakan teknik terjemah ke penjuru kiri sebelah atas (0, 0).

Contoh:

Pertimbangkan kod yang disemak ini:

.origin {
  transform-origin: 50px 50px;
  transform: rotate(45deg) scale(2);
}

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

Dengan mengikuti prinsip ini, anda boleh mensimulasikan tingkah laku dengan berkesan transform-origin menggunakan terjemah, membolehkan anda membuka kunci transformasi bernuansa dengan mudah.

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