Transformasi 2D CSS3

Transformasi 2D CSS3

Transformasi CSS3

Transformasi CSS3, kita boleh menggerakkan, menskalakan, membalikkan, memutar dan meregangkan elemen.

Bagaimana ia berfungsi?

Kesan transformasi membolehkan elemen menukar bentuk, saiz dan kedudukannya.

Anda boleh menukar elemen anda menggunakan 2D atau 3D.

Penukaran 2D

Dalam bab ini anda akan mempelajari tentang kaedah transformasi 2D:

terjemah()

putar()

skala()

skew()

matriks()

kaedah terjemah()

Kaedah translate() bergerak dari kedudukan elemen semasa mengikut parameter yang diberikan oleh kedudukan kiri (paksi-X) dan atas (paksi-Y).

transform: translate(50px,100px);

Nilai terjemah (50px, 100px) dialihkan 50 piksel dari elemen kiri dan 100 piksel dari atas.

kaedah rotate()

kaedah rotate(), memutarkan elemen mengikut arah jam mengikut darjah tertentu. Nilai negatif dibenarkan, yang memutarkan elemen mengikut lawan jam.

transform: rotate(30deg);

nilai putaran (30deg) Elemen diputar 30 darjah mengikut arah jam.

kaedah skala()

kaedah skala(), elemen bertambah atau berkurang dalam saiz, bergantung pada parameter lebar (paksi-X) dan ketinggian (paksi-Y):

transform: scale(2,4);

skala(2,4) menukarkan lebar kepada saiz asal 2 kali ganda saiz, dan 4 kali ganda ketinggian saiz asalnya.

kaedah condong()

kaedah condong(), elemen ini akan berdasarkan mendatar (paksi-X) dan menegak (Y -paksi) parameter garis Diberi sudut:

transform: skew(30deg,20deg);

skew(30deg,20deg) ialah elemen yang 20 darjah dan 30 darjah mengelilingi paksi X dan Y.

kaedah matriks()

kaedah matriks() dan kaedah transformasi 2D digabungkan menjadi satu. Kaedah matriks

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

mempunyai enam parameter, termasuk fungsi putaran, penskalaan, pergerakan (terjemahan) dan kecondongan.