Kesan putaran CSS ialah kesan yang biasa digunakan dalam pembangunan web, yang boleh menambah dinamik dan keindahan pada halaman web. Artikel ini akan memperkenalkan pengetahuan yang berkaitan tentang menggunakan atribut transformasi dalam CSS untuk mencapai kesan putaran.
1. Gambaran keseluruhan atribut transform
Atribut transformasi dalam CSS3 digunakan untuk mengubah elemen HTML, termasuk operasi seperti bergerak, menskala, berputar dan menyerong parameter untuk mencapai pelbagai kesan transformasi. Atribut transform perlu diberi awalan agar serasi dengan semua penyemak imbas, seperti: -webkit-transform, -moz-transform, -o-transform, transform. Antaranya, -webkit-transform ialah set awalan untuk menyesuaikan diri dengan pelayar kernel Webkit.
2. Pelaksanaan kesan putaran
Atribut transformasi boleh dikawal melalui fungsi transformasi seperti matriks, terjemah, skala, putaran dan condong fungsi.
Unit putaran dalam CSS boleh dinyatakan dalam sudut atau radian, dan sudut biasanya digunakan sebagai unit putaran. Sudut diukur dalam darjah, jadi anda boleh menyatakan sudut putaran secara berangka. Sebagai contoh, berputar 45 darjah boleh dicapai menggunakan putaran (45deg). Selain itu, radian dalam CSS diukur dalam rad, dan 1rad adalah bersamaan dengan 180°/π≈57.3 darjah.
Kesan putaran dicapai melalui fungsi putaran, yang memerlukan parameter yang menunjukkan sudut putaran. Pada masa yang sama, fungsi ini boleh digunakan dalam kombinasi dengan fungsi transformasi lain untuk mencapai kesan transformasi yang kompleks.
Berikut ialah contoh kod untuk mencapai kesan putaran:
Dalam kod di atas, elemen div diputar 45 darjah dan gaya bernama rotate menetapkan kernel Webkit pelayar, Kesan putaran pelayar Mozilla Firefox dan penyemak imbas Opera juga menambah gaya transformasi sintaks standard untuk memastikan keserasian penyemak imbas.
Selain kesan putaran 2D, atribut transformasi juga boleh mencapai kesan putaran 3D. Untuk mencapai kesan putaran 3D, anda perlu menggunakan tiga parameter fungsi putaran: parameter pertama ialah sudut putaran, parameter kedua ialah paksi putaran, dan parameter ketiga ialah kesan perspektif putaran.
Berikut ialah kod sampel untuk mencapai kesan putaran 3D:
