Bagaimanakah Saya Boleh Menjajarkan Elemen Diputar ke Tepi Kiri dalam CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Menjajarkan Elemen Diputar ke Tepi Kiri dalam CSS?

Susan Sarandon

Lepaskan： 2024-11-10 00:40:02

asal

618 orang telah melayarinya

How Can I Align a Rotated Element to the Left Edge in CSS?

Memutar Kedudukan dan Elemen Berputar

Dalam CSS, adalah mungkin untuk memutarkan elemen di sekeliling titik tertentu. Walau bagaimanapun, kadangkala ia boleh mencabar untuk meletakkan elemen dengan tepat selepas memutarkannya. Di sinilah sifat transform-origin berperanan.

Masalah:

Seorang pengguna ingin memutarkan

elemen dengan teks dan letakkannya di sudut kiri atas. Semasa mereka berjaya meletakkannya di bahagian atas, mereka menghadapi kesukaran untuk menjajarkannya dengan tepi kiri.

Penyelesaian:

Untuk menjajarkan elemen yang diputar dengan tepi kiri, anda perlu menetapkan harta transform-origin kepada kiri atas. Ini menetapkan titik rujukan untuk operasi putaran dan terjemahan. Selain itu, menukar nilai translateX kepada -100% akan mengalihkan asal elemen ke hujung kiri, dengan berkesan menjajarkannya dengan tepi kiri.

Contoh :

body {
  margin: 0;
}

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

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

Salin selepas log masuk

Dengan pengubahsuaian ini, yang diputar

elemen akan diletakkan tepat di penjuru kiri sebelah atas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Elemen Diputar ke Tepi Kiri dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Cara Membungkus Teks dalam Sel Data Jadual ( Artikel seterusnya：Adakah `!penting` Benar-benar Menjejaskan Prestasi?

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2061

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2222

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1872

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...