konversi CSS3 2D

CSS3 Konversi

CSS3 transisi, kita dapat dipindahkan, skala, pada gilirannya, memutar dan elemen peregangan.

Bagaimana cara kerjanya?

Pengaruh konversi, sehingga unsur untuk mengubah bentuk, ukuran dan posisi.

Anda dapat mengkonversi 2D atau 3D elemen Anda.

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.

Internet Explorer 10, Firefox, dan Opera mendukung transformasi properti.

Chrome dan Safari memerlukan versi awalan -webkit-.

Catatan: Internet Explorer 9 memerlukan versi awalan -ms-.

konversi 2D

Dalam bab ini Anda akan belajar metode konversi 2D:

• menerjemahkan ()
• memutar ()
• skala ()
• condong ()
• matrix ()

Dalam bab berikutnya Anda akan belajar konversi 3D.

contoh

div { transform: memutar (30 deg) ; - Ms-transform: memutar (30 deg) ; / * IE 9 * / - webkit-transform: memutar (30 deg) ; / * Safari dan Chrome * / }

Coba »

menerjemahkan () metode

menerjemahkan metode (), menurut kiri (sumbu X) dan bagian atas (Y-axis) posisi parameter yang diberikan, bergerak dari posisi saat ini dari elemen.

contoh

div { transform: menerjemahkan (50 px, 100 px) ; - Ms-transform: menerjemahkan (50 px, 100 px) ; / * IE 9 * / - webkit-transform: menerjemahkan (50 px, 100 px) ; / * Safari dan Chrome * / }

Coba »

menerjemahkan nilai (50px, 100px) adalah elemen seluler 50 piksel dari kiri, dan pindah 100 piksel dari atas.

memutar () metode

memutar metode (), di sejumlah diberikan derajat dalam rotasi searah jarum jam dari unsur-unsur. Nilai negatif diperbolehkan, ini adalah rotasi berlawanan arah jarum jam dari unsur-unsur.

contoh

div { transform: memutar (30 deg) ; - Ms-transform: memutar (30 deg) ; / * IE 9 * / - webkit-transform: memutar (30 deg) ; / * Safari dan Chrome * / }

Coba »

Nilai rotate (30deg) elemen diputar 30 derajat searah jarum jam.

() Metode skala

skala () metode, yang menambah atau mengurangi ukuran elemen, tergantung pada lebar (X axis) dan tinggi (Y axis) parameter:

contoh

-MS-transform: skala (2,3) ; / * IE 9 * / -webkit-transform: skala (2,3); / * Safari * / transform: skala (2,3); / * Standard sintaks * /

Coba »

skala (2,3) lebar transisi dua kali ukuran aslinya, dan tiga kali ukuran tinggi aslinya.

() Metode condong

Metode condong (), elemen menurut melintang (sumbu X) dan vertikal parameter baris (axis Y) untuk sudut yang diberikan:

contoh

div { transform: condong (30 deg, 20 deg) ; - Ms-transform: condong (30 deg, 20 deg) ; / * IE 9 * / - webkit-transform: condong (30 deg, 20 deg) ; / * Safari dan Chrome * / }

Coba »

condong (30deg, 20deg) merupakan elemen dari X-axis dan Y-axis sekitar 20 derajat sekitar 30 derajat.

matriks () metode

matriks () metode dan metode konversi 2D digabung menjadi satu.

metode matriks memiliki enam parameter, termasuk rotasi, scaling, bergerak (panning) dan fungsi tilt.

contoh

Penggunaan matriks () metode berputar elemen div 30 °

div { transform: matriks (0,866, 0.5, - 0,5, 0,866, 0, 0) ; - Ms-transform: matriks ( 0,866, 0.5, - 0,5, 0,866, 0, 0) ; / * IE 9 * / - webkit-transform: matriks (0,866, 0.5, - 0,5, 0,866, 0, 0) ; / * Safari dan Chrome * / }

Coba »

Properti konversi baru

Berikut ini adalah daftar semua properti konversi:

metode konversi 2D