Bagaimana untuk Menjajarkan Div Diputar ke Penjuru Kiri atau Kanan Atas?

Cara Menjajarkan Elemen Diputar ke Penjuru Atas Kiri atau Kanan

Meletakkan elemen yang diputar di sudut tertentu halaman web boleh mencabar. Mari kita periksa senario di mana anda ingin memutarkan div yang mengandungi teks dan menjajarkannya ke sudut kiri atas atau atas kanan.

Coretan CSS yang diberikan termasuk div dengan latar belakang merah jambu dan teks "Gambar mengikut Nama. " Atribut transform memutar div 90 darjah, menjajarkannya secara menegak di sepanjang tepi kiri atau kanan halaman bergantung pada peletakan sudut yang diingini.

Untuk menjajarkan div yang diputar ke sudut kiri atas, langkah utama ialah dengan laraskan nilai asal-ubah dan terjemahan. Dengan menetapkan asal-ubah ke kiri atas, titik putaran dialihkan ke sudut itu. Selain itu, nilai translationX mesti ditetapkan kepada -100% untuk mengalihkan elemen ke tepi kiri yang melampau.

Berikut ialah CSS yang disemak dengan pengubahsuaian yang diperlukan:

body {
  margin: 0;
}

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

Kod ini memastikan bahawa div yang diputar dijajarkan di penjuru kiri sebelah atas halaman. Dengan melaraskan nilai ini dengan sewajarnya, anda juga boleh menjajarkan elemen ke penjuru kanan sebelah atas.

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