Bagaimanakah Saya Boleh Mensimulasikan CSS `transform-origin` Hanya Menggunakan `transform: translate`?

Simulating Transform-Origin Menggunakan Terjemah dalam CSS

Dalam CSS, sifat transform-origin mentakrifkan titik asal untuk menggunakan transformasi pada elemen . Adalah penting untuk ambil perhatian bahawa sifat ini digunakan dengan mula-mula menterjemah elemen dengan nilai ditolak sifat asal-ubahnya sendiri, kemudian menggunakan transformasi elemen, dan kemudian menterjemah mengikut nilai sifat.

Untuk mensimulasikan tingkah laku transform-origin menggunakan transform: terjemah, langkah berikut adalah perlu:

1. Nafikan nilai transform-origin: Nilai untuk transform-origin perlu dinafikan sebelum memohon mereka sebagai terjemahan. Ini kerana penjelmaan terjemah akan menggunakan nilai negatif pada titik asal, menyongsangkan asalan dengan berkesan.
2. Gunakan penjelmaan elemen: Selepas menafikan nilai asal penjelmaan, penjelmaan elemen boleh digunakan seperti biasa.
3. Terjemahkan asal: Akhir sekali, terjemahkan asal kembali ke kedudukan asalnya menggunakan nilai asal-ubah yang dinafikan positif. Langkah ini memastikan titik asal ditetapkan semula ke lokasi yang dimaksudkan.

Contoh Salah:

Dalam contoh yang disediakan, isunya ialah terjemahan yang salah. Nilai yang dinafikan untuk asal-ubah digunakan dengan betul, tetapi terjemahan terakhir tiada. Kod yang diperbetulkan berikut akan menghasilkan hasil yang tepat:

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

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

Contoh Betul:

Contoh yang diperbetulkan ini termasuk langkah terjemahan terakhir, yang diperlukan untuk memulihkan titik asal kepada kedudukan yang dimaksudkan. Akibatnya, kotak akan mempamerkan rupa berubah yang sama, menunjukkan bahawa asal-ubah memang boleh disimulasikan menggunakan transformasi: terjemah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mensimulasikan CSS `transform-origin` Hanya Menggunakan `transform: translate`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!