Bagaimana untuk menetapkan flip font dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan flip font dalam css3

WBOY

Lepaskan： 2022-08-11 17:33:07

asal

3310 orang telah melayarinya

Dalam CSS3, anda boleh menggunakan atribut transform dengan fungsi rotate() untuk menetapkan flip fon Hanya tetapkan parameter dalam fungsi rotate() kepada "180deg"; Fungsi rotate() boleh menentukan gaya putaran elemen, dan sintaksnya ialah "elemen fon {transform:rotate(180deg);}".

Bagaimana untuk menetapkan flip font dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara menetapkan penyongsangan fon dalam css3

Dalam css, jika anda ingin memutar fon 180 darjah, anda boleh menggunakan fungsi transform attribute dan rotate().

Transform ialah salah satu ciri yang mengganggu dalam CSS3 Ia boleh merealisasikan anjakan, putaran, kecondongan, penskalaan elemen, dan juga menyokong kaedah matriks Dengan peralihan dan pengetahuan animasi yang perlu dipelajari, ia boleh menggantikan sejumlah besar Kesan sebelum ini sahaja yang hanya boleh dicapai dengan Flash.

Ubah secara literal bermaksud ubah bentuk Dalam CSS3, beberapa operasi yang disokong oleh transformasi termasuk

(1) putar putar,
(2) Herotan condong,
(3) Skala
(4) Gerakkan terjemah
(5) Matriks transformasi matriks.

Fungsi rotate() mentakrifkan putaran 2D dan sudut ditentukan sebagai 180 darjah dalam parameter.

Dalam sistem koordinat CSS, arah positif paksi-X adalah dari kiri ke kanan, arah positif paksi-Y adalah dari atas ke bawah, dan arah positif paksi-Z ialah dari dalam skrin ke luar skrin.

Apabila garis penglihatan pemerhati berada di sepanjang arah positif paksi Dalam arah positif paksi, jika putaranY positif, ia bermakna elemen berputar lawan jam, dan jika negatif, ia bermakna elemen berputar mengikut arah jam;

Apabila garis penglihatan pemerhati berada di sepanjang arah positif paksi Z, jika putaranZ positif, ia bermakna elemen berputar mengikut lawan jam, iaitu Negatif bermakna elemen diputar mengikut arah jam.

Contoh adalah seperti berikut:

Hasil output:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  p{
    width:200px;
    transform:rotate(180deg);
  }
  </style>
</head>
<body>
  <p>字体翻转</p>
</body>
</html>

Salin selepas log masuk

Bagaimana untuk menetapkan flip font dalam css3 (Belajar perkongsian video:

css tutorial video

, tutorial video html)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan flip font dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!