Bagaimana untuk Meletakkan Elemen Diputar di Penjuru Kiri Atas atau Kanan Atas?

Letakkan Elemen Diputar di Penjuru Kiri Atas atau Kanan Atas

Apabila memutarkan elemen, adalah penting untuk memahami cara asal-transformasi mempengaruhi kedudukannya. Sifat ini menentukan titik di sekeliling elemen akan diputarkan. Dengan melaraskan asal-ubah, anda boleh mengawal kedudukan akhir elemen dengan berkesan selepas putaran.

Untuk meletakkan elemen yang diputar di penjuru kiri sebelah atas, ubah suai asal-ubahnya kepada "kiri atas" dan tetapkan translateX kepada "- 100%". Ini akan memastikan elemen berputar di sekitar penjuru kiri sebelah atas dan bergerak ke kedudukan yang sesuai.

Berikut ialah contoh kod:

<div class="credit">
  Picture by Name
</div>

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

Sebaliknya, untuk meletakkan elemen yang diputar di penjuru kanan sebelah atas, cuma tukar transform-origin kepada "kanan atas" dan kekalkan set translateX kepada "-100%".

Anda boleh meneroka ini pelaksanaan dalam biola yang disediakan: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

Ingat untuk melaraskan nilai kedudukan seperti yang diperlukan untuk memenuhi keperluan khusus anda. Eksperimen dengan tetapan asal-ubah yang berbeza untuk mencapai penjajaran dan susun atur yang diingini untuk elemen diputar anda.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Elemen Diputar di Penjuru Kiri Atas atau Kanan Atas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!