Tutorial Belajar CSS 3 Part 5 – Transform pada CSS3

Dalam tutorial kali ini kita akan membahas salah satu fitur dari CSS3 yaitu transform, dengan menggunakan transform teman – teman dapat merubah dari tampilan sebuah objek, seperti memutar objek(rotate), memperbesar ukuran(scale), dan skew dan beberapa fitur lainnya

Pengembangannya nanti anda dapat membuat animasi dari objek dengan menggunakan perpaduan fitur CSS yaitu transform dan animation.

 

CSS3 Transform

Nah kita akan bahas terlebih dahulu beberapa hal yang bisa anda gunakan pada perintah transform, antara lain :

 

  • Translate()

translate digunakan untuk memindahkan dari sebuah element, anda dapat menentukan posisi dari perpindahan dengan memberikan nilai pada parameter x untuk jarak kesamping (secara horizontal) dan parameter y sebagai jarak tingginya (secara vertical)

  • scale()

scale digunakan untuk memperbesar atau memperkecil dari ukuran sebuah objek.

  • skewX()

skewX digunakan untuk memiringkan element dengan mengatur nilai pada sumbu x (horizontal)

  • skewY()

skewY digunakan untuk memiringkan element dengan mengatur nilai pada sumbu y (vertical)

  • Rotate()

digunakan untuk memutar sebuah objek, anda dapat mengatur nilai dari perputarannya, dengan satuan derajat.

  • Matrix()

digunakan untuk menggabungkan beberapa perintah sekaligus yang ada didalam perintah transform seperti rotate(), skew(),scale(), sehingga perintah dari transform dapat ditampilkan sekaligus.

 

Baik untuk belajar mengenai skrip transform, kita akan pelajari contohnya satu persatu.

 

Translate()

Seperti penjelasan dibagian awal, translate digunakan untuk merubah posisi dari sebuah objek, untuk perintah yang bisa anda tuliskan adalah seperti berikut ini :

untuk contoh skripnya adalah seperti berikut :

Semisal kita simpan dengan nama transform-translate.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Pada kotak 1 yang berwarna merah dan berwarna biru harusnya bersebelahan, karena kita tidak menset bagian margin pada 2 objek tersebut.
  • Posisi dari kotak 2 yang berwarna biru berpindah dengan posisi 50 pixel kearah kanan, dan 400 pixel kearah bawah karena kita menset translate(50px,400px)

 

Scale()

Perintah scale digunakan untuk merubah ukuran dari objek, baik itu diperbesar ataupun diperkecil, untuk perintahnya adalah seperti berikut ini :

Untuk contoh dari penggunaan skrip adalah seperti berikut ini :

Semisal kita simpan dengan nama transform-scale.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Pada kotak pertama yang berwarna merah kotak ditampilkan dengan ukuran sesungguhnya yaitu 100 pixel untuk lebar, dan 100 pixel untuk tinggi.
  • Pada kotak kedua yang berwarna biru kotak ditampilkan dengan ukuran 2 kali lipat untuk lebar, dan 2 kali lipat untuk tinggi, karena kita menggunakan perintah scale(2,2)

 

SkewX()

Digunakan untuk memiringkan objek berdasarkan sumbu X (Horizontal), untuk perintahnya adalah seperti berikut ini :

Untuk contoh skrip adalah sebagai berikut ini :

Semisal kita simpan dengan nama trasnform-skewX.html, lalu kita buka dibrowser maka hasilnya adalah :

Keterangan :

  • Kotak 1 ditampilkan dengan tampilan normal
  • Kotak 2 untuk tampilannya miring karena kita memberikan nilai skewx sebesar 50deg, sehingga miring sebear 50 derajat.

 

SkewY()

Digunakan untuk memiringkan objek berdasarkan sumbu Y (Vertical), untuk perintahnya adalah seperti berikut ini :

Untuk Contoh Skripnya adalah seperti berikut ini :

Semisal kita simpan dengan nama skewY.html lalu kita buka di browser :

Keterangan :

  • Kotak 1 ditampilkan dengan sebagaimana mestinya
  • Kotak 2 kita berikan nilai skewY(10deg) yang membuat kotak 2 memiliki kemiringan sebanyak 10 derajat secara vertical.

 

Rotate()

Property transform ini digunakan untuk melakukan perputaran pada objek dipilih, untuk perintah rotate adalah seperti berikut ini :

Untuk contoh penggunaan skripnya adalah seperti berikut ini :

Semisal kita simpan dengan nama rotate.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

  • Kotak 1 ditampilkan dengan tampilan normal
  • Kotak 2 ditampilkan dengan memutar 90 Derajat karena kita memberikan property rotate(90deg) sehingga objek berputar 90 derajat.

 

Matrix()

Perintah matrix ini digunakan untuk memberikan beberapa perintah transform sekaligus, sehingga anda tidak perlu menuliskannya satu persatu, untuk perintahnya adalah seperti berikut ini :

 

Untuk Contoh dari penggunaan skrip matrix adalah sebagai berikut ini :

Semisal kita simpan dengan nama matrix.html, lalu kita buka di browser maka hasilnya adalah

Keterangan :

  • Kotak pertama ditampilkan dengan tampilan normal.
  • Kotak kedua ditampilkan dengan tampilan scaleX 1 sehingga perbesaran objeknya secara sumbu x adalah 1x berikutnya skewX 2 sehingga kemiringan objek sebesar 2 derajat berikutnya,  scaleY 2 sehingga perbesaran objeknya secara sumbu y adalah 2 kali.

Jadi kurang lebih seperti itu teman – teman untuk tutorial mengenai transform di CSS3 anda dapat merubah tampilan dari web dengan menggunakan beberapa property yang ada pada transform ini.

 

 

One thought on “Tutorial Belajar CSS 3 Part 5 – Transform pada CSS3

Leave a Reply

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