Apakah transformasi CSS3

Ubah bentuk CSS3 merujuk kepada menggunakan atribut transformasi untuk melakukan putaran, herotan, penskalaan, sesaran, matriks, asal dan jenis pemprosesan ubah bentuk lain pada elemen operasi ubah bentuk memerlukan penggunaan rotate(), skew (), skala (), terjemah(), matriks() dan fungsi lain untuk dilaksanakan.

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

Apakah itu transformasi css3

Dalam CSS3, anda boleh menggunakan fungsi transformasi untuk mencapai putaran, herotan, penskalaan, anjakan teks atau imej , Enam jenis pemprosesan transformasi matriks dan asal akan diterangkan secara terperinci di bawah.

Ubah bentuk--putar()

div.box{transform: rotate(45deg);} /*顺时针旋转45度*/

Ubah bentuk--putar condong()

div.box{transform:skew(45deg);} 
/*通过skew（）函数将长方形变成平行四边形。*/

Skew() mempunyai tiga situasi:

1. skew(x,y) menyebabkan elemen berpusing dalam arah mendatar dan menegak pada masa yang sama (paksi-X dan paksi-Y berada pada nilai sudut tertentu pada masa yang sama Herotan); y) hanya memesongkan elemen dalam arah menegak Ubah bentuk (herotan paksi-Y)

Ubah bentuk--skala skala()

Skala skala mempunyai tiga situasi:

1. skala(X,Y) menyebabkan elemen berskala mendatar dan menegak pada masa yang sama (iaitu, paksi-X dan skala paksi-Y serentak)

div.box{transform: scale(1.5,0.5);}

2. skalaX(x) hanya menskalakan elemen secara mendatar (penskalaan paksi-X) )

3. Elemen skalaY(y) hanya menskala dalam arah menegak (penskalaan paksi-Y)

Nilai lalai skala() ialah 1, apabila nilai ditetapkan kepada antara 0.01 dan 0.99 Mana-mana nilai 1.01 menyebabkan elemen mengecut atau sama dengan 1.01 menyebabkan elemen mengembang.

Ubah bentuk--Sesaran translate()

terjemah Kami membahagikannya kepada tiga situasi:

1. translate(x , y) bergerak secara mendatar dan menegak pada masa yang sama (iaitu, paksi-X dan paksi-Y bergerak serentak)

div.box{transform: translate(50px,100px);}  
/*  通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。  */

2. translateX(x) hanya bergerak secara mendatar (paksi-X bergerak)

3. terjemahY(Y) hanya bergerak dalam arah menegak (pergerakan paksi-Y)

Transformasi--Matriks matriks ()

(Mempelajari perkongsian video:

div.box{transform: matrix(1,0,0,1,100,100);}  /*
    matrix() 6个属性的意思的：第一个宽度比例1就是原大小，
第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜
第三个是左右倾斜，数字和第二个一样的意思，
第四个是高度比例1就是原大小，
第五个是X方向的像素位移，X方向就是左右，
第六个是Y方向的像素位移，X方向就是上下
*/

tutorial video css

)

Atas ialah kandungan terperinci Apakah transformasi CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!