ciri putaran css3

Dengan perkembangan teknologi Internet yang berterusan, CSS (Cascading Style Sheets) telah menjadi semakin berkuasa, terutamanya kemunculan CSS3, yang telah membawa banyak faedah kepada pereka web. Antaranya, ciri penggiliran CSS3 sudah pasti salah satu ciri yang paling praktikal dan digunakan secara meluas dalam reka bentuk web. Artikel ini akan memperkenalkan prinsip dan aplikasi putaran CSS3.

Prinsip ciri putaran CSS3

Fungsi putaran CSS3 menyediakan empat kaedah putaran, iaitu putaran mengikut arah jam, putaran lawan jam, putaran tiga dimensi dan putaran satah. Di bawah, kami akan memperkenalkan prinsip empat kaedah putaran ini masing-masing.

1. Putaran mengikut arah jam dan lawan jam

Prinsip pusingan mengikut arah jam dan lawan jam adalah sama, dan kedua-duanya dilaksanakan melalui fungsi rotate(). Fungsi rotate() menerima parameter, unitnya ialah darjah (deg), menunjukkan sudut putaran. Nombor positif mewakili putaran mengikut arah jam, nombor negatif mewakili putaran lawan jam. Sebagai contoh, kod di bawah mewakili putaran 45 darjah mengikut arah jam.

transform:rotate(45deg);

2. Putaran tiga dimensi

Putaran tiga dimensi merujuk kepada putaran objek dalam ruang tiga dimensi, termasuk paksi-X, paksi-Y dan paksi-Z. Ia dilaksanakan melalui fungsi rotateX(), rotateY() dan rotateZ().

• fungsi rotateX() mewakili putaran di sekeliling paksi-X, unitnya ialah darjah.

transform:rotateX(45deg);

• fungsi rotateY() mewakili putaran di sekeliling paksi Y.

transform:rotateY(45deg);

• fungsi rotateZ() mewakili putaran di sekeliling paksi Z.

transform:rotateZ(45deg);

3. Putaran satah

Putaran satah merujuk kepada putaran objek dalam satah dua dimensi, yang dicapai melalui fungsi rotate(). Tidak seperti putaran mengikut arah jam dan lawan jam, putaran satah boleh menetapkan titik pusat putaran. Sebagai contoh, kod berikut mewakili putaran 45 darjah menggunakan pusat objek sebagai titik pusat putaran.

transform-origin:center;
transform:rotate(45deg);

Aplikasi ciri putaran CSS3

Ciri putaran CSS3 boleh digunakan secara meluas dalam reka bentuk web Di bawah kami akan memperkenalkan beberapa senario aplikasi biasa.

1. Putaran imej

Putaran imej ialah salah satu senario yang paling banyak digunakan untuk ciri putaran CSS3. Sebagai contoh, kita boleh menetapkan imej logo tapak web kepada keadaan diputar untuk meningkatkan kesan visual halaman. Kod di bawah mewakili putaran 45 darjah.

.logo{
  transform:rotate(45deg);
}

2. Putaran menu

Dalam reka bentuk web, menu navigasi yang biasa digunakan biasanya disusun secara mendatar atau menegak. Walau bagaimanapun, apabila kita ingin melaksanakan menu navigasi khas, kita boleh menggunakan ciri putaran CSS3. Sebagai contoh, kod berikut memutarkan menu navigasi 90 darjah di sekeliling paksi Y supaya ia disusun secara menegak.

.menu{
  transform:rotateY(90deg);
}

3. Selak kad

Kesan selak kad ialah kesan yang biasa digunakan dalam reka bentuk web, yang boleh menjadikan halaman kelihatan lebih terang dan menarik. Prinsip merealisasikan kesan flip kad adalah ciri putaran CSS3. Sebagai contoh, kod berikut mewakili kesan putaran bahagian hadapan dan belakang kad.

<div class="card">
  <div class="front">正面</div>
  <div class="back">反面</div>
</div>

Ringkasan

Ciri penggiliran CSS3 menyediakan pereka web dengan lebih banyak penyelesaian reka bentuk yang fleksibel. Pelbagai kesan putaran boleh dicapai dengan menetapkan sudut putaran, pusat putaran dan paksi putaran. Sama ada gambar, menu atau flip kad, anda boleh menggunakan ciri penggiliran CSS3 untuk meningkatkan keseronokan dan pemperibadian halaman Web.

Atas ialah kandungan terperinci ciri putaran css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!