Bagaimanakah Saya Boleh Mencapai Putaran Teks Menegak Merentas Pelayar dengan CSS?

Putaran Teks Menegak Merentas Pelayar menggunakan CSS

Latar Belakang

Banyak laman web moden menggabungkan dinamik kandungan, termasuk teks diputar. Walau bagaimanapun, mencapai teks menegak yang konsisten merentas penyemak imbas telah memberikan cabaran.

Penyelesaian

Untuk memutar perkataan 90 darjah, manfaatkan sifat 'transform':

.rotate {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;  
}

Keserasian Pelayar

Pendekatan ini menyokong pelayar utama:

• Chrome (sebarang versi)
• Firefox (≥2)
• Safari (≥3.1)
• Opera (≥5 )
• IE (≥9)

Nota

Versi IE sebelum 9 memerlukan penggunaan sifat penapis:

.rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Untuk Firefox (≥ 3.5) dan Webkit (≥3.1), pertimbangkan '-moz-transform' dan '-webkit-transform', masing-masing.

Kesimpulan

Teknik CSS yang disediakan membolehkan penggiliran teks menegak merentas pelayar, membolehkan persembahan kandungan yang cekap dan konsisten.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Putaran Teks Menegak Merentas Pelayar dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!