kesan putaran css

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.

1. Unit putaran

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.

2. Mencapai putaran

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:

c9ccee2e6ea535a969eb3f532ad9fe89
.putar {

-webkit-transform: rotate(45deg); /* Webkit内核浏览器 */
-moz-transform: rotate(45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate(45deg); /* Opera 浏览器 */
transform: rotate(45deg); /* 标准语法 */

}
531ac245ce3e4fe3d50054a55f265927
41f4583e9f567ac77c0973b98d0bbcc9Hello, World!16b28748ea4df4d9c2150843fecfba68

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.

3. Mencapai kesan putaran 3D

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:

c9ccee2e6ea535a969eb3f532ad9fe89
.rotate3d {

-webkit-transform: rotate3d(1,1,0,45deg); /* Webkit内核浏览器 */
-moz-transform: rotate3d(1,1,0,45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate3d(1,1,0,45deg); /* Opera 浏览器 */
transform: rotate3d(1,1,0,45deg); /* 标准语法 */

}
69a775f83fc18b8b5b447531d5ff3f85Hello, World!16b28748ea4df4d9c2150843fecfba68

Dalam kod di atas, elemen div melaksanakan putaran 3D sebanyak 45 darjah di sekeliling (1,1 ,0) paksi Akibatnya, semua awalan penyemak imbas turut ditambah untuk keserasian.

3. Ringkasan

Melalui fungsi putar atribut transformasi, kita boleh mencapai kesan putaran elemen halaman web dan juga mencapai kesan putaran 3D. Penggunaan kaedah ini yang sesuai boleh menjadikan elemen halaman web kami lebih jelas dan dinamik.

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