Tutorial CSS3 Transform 2 Dimensi

Pada tutorial kali ini kita akan belajar tentang Transform 2 Dimensi pada CSS3. Dimana perubahan yang bisa kita lakukan adalah seperti merubah scale (ukuran), translate (posisi), rotate (putaran), skew, dan matriks pada elemen. Transformasi 2 dimensi ini support pada semua browser, kecuali versi dari Internet Explorer, yakni versi 8 dan sebelumya. Dalam penggunaannya pun, pastikan untuk mengikut sertakan nama – nama dari masing – masing vendor browser seperti pada table di bawah ini :

Awalan Vendor
-ms- Internet Explorer
-o- Opera
-webkit- Chrome dan Safari
-moz- Mozilla Firefox

Sekarang mari kita ke pokok pembahasan.


Rotasi (Rotate)

Dengan nilai property rotate(nilai_derajat), elemen diputar tergantung dari “nilai_derajat” yang diberikan. Putaran yang terjadi searah dengan jarum jam. Pada hasil kode sumber di bawah ini, silahkan arahkan kursor mouse kalian ke objek.

Di bawah ini adalah output dari kode sumber di atas :

Tutorial CSS3 Transform 2 Dimensi

Perpindahan (Translate)

Nilai property dari “translate(parameter)” membuat elemen berpindah dari posisi sebelumnya ke posisi yang lain. Tergantung dari nilai parameter yang diberikan. Tedapat 2 nilai yang harus di input karena berdasarkan nilai x dan y. Dan perpindahan dilakukan dari kiri (x), dan atas (y). Pada kode sumber di bawah ini silahkan di copas, kemudian arahkan kursor mouse kalian ke objek.

Hasil dari kode sumber di atas :

Transform 2 dimensi CSS 3

Skala (Scale)

Dengan nilai property “scale” anda dapat merubah ukuran elemen, tergantung dari parameter yang anda berikan. Nilai yang di input adalah 2 nilai, yakni nilai x dan nilai y. x untuk lebar dan y untuk tinggi. Pada hasil kode sumber di bawah ini, silahkan arahkan kursor mouse kalian ke objek.

Di bawah ini adalah hasil dari kode sumber di atas :

Transformasi 2 dimensi pada CSS

Miring / Condong (Skew)

Dengan nilai property “skew” dapat membuat elemen HTML akan condong / miring dengan kemiringan sesuai dari nilai parameter yang diberikan. Nilai yang diberikan ini berdasarkan nilai horizontal (x) dan vertical (y). Kemiringan ini berdasarkan pada nilai sudut. Pada hasil kode sumber di bawah ini, silahkan arahkan kursor mouse kalian ke objek.

Dan di bawah ini adalah hasil dari kode sumber di atas :

Transformasi pada css3

Matrix

Nilai property “Matrix” adalah hasil dari gabungan 4 nilai property di atas (rotate, translate, scale, skew). Dan nilai property “Matrix” memiliki 6 parameter, selain 4 nilai parameter di atas, nilai lainnya adalah nilai fungsi matematika.

Berikut Source Codenya :

Dan berikut hasil nya :

Transformasi 2 dimensi css


Demikian tutorial dari CSS3 Transform 2 Dimensi, silahkan kunjungi artikel lainnya seperti Prefix pada CSS, atau bila belum tahu apa itu Selector pada CSS, silahkan di kunjungi.

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Tutorial CSS3 Transform 2 Dimensi”

× Contact Us