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 :
|
1 |
translate(nilai_jarak_samping_horizontal, nilai_jarak_atas_vertical) |
untuk contoh skripnya adalah seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Tutorial CSS Transform</title> <style type="text/css"> .kotak_1{ background: salmon; float: left; width: 150px; height: 150px; } .kotak_2{ background: cyan; float: left; width: 150px; height: 150px; -ms-transform: translate(50px,400px); /* Internet Explorer 9 */ -webkit-transform: translate(50px,400px); /* Safari */ transform: translate(50px,400px); /* Syntax Standart */ } </style> </head> <body> <h1>Tutorial CSS Transform - translate</h1> <div class="kotak_1"> Ini adalah kotak 1. kotak ini tidak di berikan method translate </div> <div class="kotak_2"> Ini adalah kotak 2. ini contoh fungsi translate() CSS Transform. </div> </body> </html> |
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 :
|
1 |
scale(perkalian_dari_nilai_lebar,perkalian_dari_nilai_tinggi) |
Untuk contoh dari penggunaan skrip adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Tutorial CSS Scale</title> <style type="text/css"> .kotak_1{ background: salmon; width: 100px; height: 100px; margin:100px; } .kotak_2{ background: cyan; width: 100px; height: 100px; margin:100px; -ms-transform: scale(2, 2); /* IE 9 */ -webkit-transform: scale(2, 2); /* Safari */ transform: scale(2, 2); } </style> </head> <body> <h1>Tutorial CSS Transform - scale</h1> <div class="kotak_1"> kotak 1 </div> <div class="kotak_2"> kotak 2 </div> </body> </html> |
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 :
|
1 |
skewX(nilai kemiringan) |
Untuk contoh skrip adalah sebagai berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Tutorial CSS Skewx</title> <style type="text/css"> .kotak_1{ background: salmon; width: 400px; height: 100px; margin-left: 200px; } .kotak_2{ background: cyan; width: 400px; height: 100px; margin-left: 200px; -ms-transform: skewX(50deg); /* IE 9 */ -webkit-transform: skewX(50deg); /* Safari */ transform: skewX(50deg); /* Standard syntax */ } </style> </head> <body> <h1>Tutorial CSS Transform - skewx</h1> <div class="kotak_1"> kotak 1 </div> <div class="kotak_2"> kotak 2 </div> </body> </html> |
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 :
|
1 |
skewY(nilai kemiringan) |
Untuk Contoh Skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Tutorial CSS SkewY</title> <style type="text/css"> .kotak_1{ background: salmon; width: 400px; height: 100px; margin-left: 200px; } .kotak_2{ background: cyan; width: 400px; height: 100px; margin-left: 200px; -ms-transform: skewY(10deg); /* IE 9 */ -webkit-transform: skewY(10deg); /* Safari */ transform: skewY(10deg); /* Standard syntax */ } </style> </head> <body> <h1>Tutorial CSS Transform - skewY</h1> <div class="kotak_1"> kotak 1 </div> <div class="kotak_2"> kotak 2 </div> </body> </html> |
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 :
|
1 |
rotate(nilai rotasi) |
Untuk contoh penggunaan skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Tutorial CSS Rotate</title> <style type="text/css"> .kotak_1{ background: salmon; width: 200px; height: 100px; margin-left: 200px; } .kotak_2{ background: cyan; width: 200px; height: 100px; margin-left: 200px; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ transform: rotate(90deg); } </style> </head> <body> <h1>Tutorial CSS Transform - Rotate</h1> <div class="kotak_1"> kotak 1 </div> <div class="kotak_2"> kotak 2 </div> </body> </html> |
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 :
|
1 |
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) |
Untuk Contoh dari penggunaan skrip matrix adalah sebagai berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Tutorial CSS Matrix</title> <style type="text/css"> .kotak_1{ background: salmon; width: 200px; height: 100px; margin-left: 200px; } .kotak_2{ background: cyan; width: 200px; height: 100px; margin-left: 200px; transform: matrix(1, 0, 2, 2, 0, 0); } </style> </head> <body> <h1>Tutorial CSS Transform - Matrix</h1> <div class="kotak_1"> kotak 1 </div> <div class="kotak_2"> kotak 2 </div> </body> </html> |
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.
Informasi ini sangat membantu.