Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menjajarkan Div Diputar ke Penjuru Kiri atau Kanan Atas?

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

Patricia Arquette
Patricia Arquetteasal
2024-11-07 10:03:03943semak imbas

How to Align a Rotated Div to the Top Left or Right Corner?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn