Property Transform Pada CSS3

Property Transform Pada CSS3 – Pada CSS3 ada property yang memungkinkan kita dapat memanipulasi format visual dari elemen HTML yang kita buat dengan menggunakan property CSS3 transform. Format visual yang dimaksud bisa berupa manipulasi bentuk, ukuran, dan posisi suatu elemen HTML. Property CSS3 transform ada 2 jenis, yaitu untuk yang 2D dan 3D. Catatan dalam artikel ini, untuk property CSS3 transform 2D.

Perlu dicatat bahwa property CSS3 transform merupakan keliru satu property CSS3 yg masih eksperimental. Jadi jika kita ingin gunakan property ini & sanggup berjalan pada seluruh browser, ingat implementasi penggunaan vendor prefixes pada awal sintaknya.

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Transform CSS3</title> 	<style> 		body { 			font-family: verdana; 			font-size: 30px; 			text-align: justify; 		} 		/* 		scale(angka), scaleX(angka), scaleY(angka) 		rotate(deg), rotateX(deg), rotateY(deg) 		skew(deg), skewX(deg), skewY(deg) 		translate(px), translateX(px), translateY(px) 		*/ 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 		} 	</style> 	 </head> <body> 	<div class="kotak"></div> 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sunt pariatur sapiente nam. Quisquam nemo maxime necessitatibus possimus id quam, exercitationem alias consequatur dolor et facere optio in veritatis delectus!</p>	 </body> </html>

Ukuran Dan Posisi Awal Kotak

FUNGSI TRANSFORM

a. Scale ( Memperbesar / Memperkecil Ukuran Elemen HTML )

Fungsi scale pada property CSS3 transform adalah buat memperbesar & memperkecil berukuran sebuah elemen HTML. Fungsi scale ini memakai satuan angka seperti 0, 0.6, 1, 1.2, dua, 2.Lima, 3, 4, 5, ? Dan tak terhingga. Penggunaan fungsi scale ini terdapat 3 jenis, yaitu:

1. scale : untuk memperbesar dan memperkecil ukuran suatu elemen HTML baik secara horizontal dan vertikal dengan proporsi yang sama.

2. scaleX : untuk memperbesar dan memperkecil ukuran suatu elemen HTML secara horizontal saja.

3. scaleY : untuk memperbesar dan memperkecil ukuran suatu elemen HTML secara vertikal saja.

Cara penggunaan fungsi scale kita bisa menggunakan 1 nilai property atau 2 nilai property. Contoh penggunaan scale 1 nilai property, kalau kita menggunakan fungsi ‘scale’, maka kita menggunakan 1 nilai property namun bisa merubah ukuran horizontal dan vertikal. Kita juga bisa menggunakan scaleX atau scaleY apabila kita hanya ingin mengubah ukuran baik secara horizontal atau vertical saja. Lalu untuk penggunaan nilai property scaleX dan nilai property scaleY kita bisa gunakan secara bersama, yang artinya kita menggunakan fungsi scale dengan 2 nilai sumbu X dan sumbu Y. berikut contoh sintak penggunaan property CSS3 transform fungsi scale:

			<style> 			.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: scale(0.5); 		} </style>

			<style> 			.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: scaleX(1.1) scaleY(0.5) ; 		} </style>

Contoh 1 menggunakan fungsi scale sebesar 0.5, yang artinya kotak diperkecil menjadi setengah dari ukuran aslinya ( lihat gambar untuk HTML awal ). Contoh 2, menggunakan fungsi scale dengan 2 nilai property yaitu sumbu X sebesar 1.1 yang artinya kotak diperbesar menjadi 110% secara horizontal. Sedangkan untuk sumbu Y sebesar 0.5, yang artinya kotak diperkecil menjadi 50% dari ukuran awalnya.

Untuk melihat perubahan secara jelas, kita mampu mengkombinasi penggunaannya supaya lebih interaktif, misalnya mengkombinasi menggunakan memakai kombinasi dengan kelas pseudo group :hover.

b. Rotate ( Memutar Elemen HTML )

Fungsi rotate pada property CSS3 transform adalah buat memutar atau merotasi sebuah elemen HTML baik searah menggunakan jarum jam atau berlawanan dengan arah jarum jam. Satuan yg digunakan buat fungsi rotate ini adalah derajat ( deg ). Nilainya menggunakan 0 - 360deg. Baik itu nilai positif apabila perputarannya searah menggunakan jarum jam, atau negative jika perputarannya antagonis menggunakan arah jarum jam kita menggunakan nilai 0 ? 360deg. Penggunaan fungsi rotate ada tiga jenis, yaitu :

1. rotate(deg) : untuk merotasi sebuah elemen HTML dengan sumbu pusatnya ada di titik paling tengah.

2. rotateX(deg) : untuk merotasi sebuah elemen HTML dengan sumbu pusatnya ada ditengah secara horizontal. Ibaratnya kalo kertas bujursangkar dilipat menjadi dua bagian sama rata, garis lipatannya adalah sumbunya.

3. rotateY(deg) : untuk merotasi sebuah elemen HTML dengan sumbu pusatnya ada ditengah secara vertikal. Ibaratnya kalo kertas bujursangkar dilipat menjadi dua bagian yang sama rata, garis lipatannya adalah sumbunya.

Cara penggunaan nilai transform fungsi rotate ini, bisa menggunakan hanya 1 nilai property atau multiple nilai property. Artinya kalau kita menggunakan nilai property multiple kita bisa memberikan nilai property transform fungsi rotate ini secara bersamaan baik itu nilai rotate(deg), rotateX(deg), dan rotateY(deg) sehingga kita memberikan nilai property transform fungsi rotate ini lebih dari satu. Untuk contoh penulisan sintaknya, silakan lihat contoh di bawah ini:

			<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: rotate(75deg); 		} </style>

			<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: rotateX(75deg) rotateY(45deg) rotate(60deg); 		} </style>

Contoh 1 menggunakan rotate sebesar 90deg, artinya memutar searah dengan jarum jam sebesar 90 derajat, dengan sumbu pusatnya ada di titik paling tengah. Contoh 2 menggunakan kombinasi rotateX sebesar 75deg, rotateY sebesar 45deg, dan rotate 60deg.

c. Skew ( Membuat Condong / Miring Elemen HTML )

Fungsi skew pada property CSS3 transform adalah untuk membuat condong suatu elemen HTML. Satuan yang digunakan untuk fungsi skew ini adalah derajat ( deg ). Nilainya menggunakan 0 - 360deg. Nilai positif akan membuat elemen HTML cenderung bergerak kearah kanan. Dan nilai skew negatif akan cenderung membuat elemen HTML bergerak ke arah kiri. Secara default nilai skew sama dengan nilai skewX. Penggunaan fungsi skew ada 3 jenis, yaitu :

1. skew(deg) untuk membuat elemen HTML menjadi cenderung miring/condong secara horizontal. Nilai positif akan membuat condong/miring ke kiri. Nilai negatif akan membuat sebuah elemen condong / miring ke kanan. skew = skewX

2. skewX(deg) untuk membuat elemen HTML menjadi cenderung miring/condong secara horizontal. Nilai positif akan membuat condong/miring ke kiri. Nilai negatif akan membuat sebuah elemen condong / miring ke kanan. skew = skewX

3. skewY(deg) untuk membuat elemen HTML menjadi cenderung miring/condong secara vertikal. Nilai positif akan membuat condong/miring ke arah atas bagian sisi sebelah kiri. Nilai negatif akan membuat sebuah elemen condong/miring ke arah atas bagian sisi sebelah kanan.

Cara penggunaan nilai transform fungsi skew ini, bisa menggunakan hanya 1 nilai property atau multiple nilai property. Artinya kalau multiple nilai property, kita sanggup menaruh nilai property transform fungsi skew secara bersamaan baik itu nilai skew(deg), skewX(deg), dan skewY(deg) sehingga kita memberikan nilai property transform fungsi skew ini lebih menurut satu nilai property. Untuk lebih jelas silakan lihat model sintak di bawah ini.

			<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: skew(-335deg); 		} </style>

			<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: skewX(-35deg) skewY(20deg); 		} </style>

Contoh 1 menggunakan skew dengan nilai -335deg. Contoh 2 menggunakan skew dengan nilai property multiple. Yaitu nilai skewX sebesar -35deg dan skewY sebesar 20deg.

d. Translate ( Mengubah Posisi )

Fungsi translate pada property CSS3 transform ini adalah untuk mengubah posisi suatu elemen HTML. Satuan yang digunakan adalah pixel ( px ). Kita bisa menggunakan nilai 1, 10, 23, 40, 50, … dan tak terhingga. Untuk nilai dari property CSS3 transform fungsi translate ini ada 3 jenis :

1. translate(px) untuk mengubah posisi suatu elemen HTML sama seperti fungsi property CSS position absolute dengan menggunakan property left apabila kita beri nilai positif. Hasil dari nilai translate(px) = translateX(px) apabila bernilai positif.

2. translateX(px) untuk mengubah posisi suatu elemen HTML secara horizontal. Hasil dari nilai translate(px) = translateX(px) apabila bernilai positif. Fungsi translateX(px) sama seperti menggunakan property CSS position absolute dengan menggunakan property CSS left dan right.

3. translateY(px) untuk mengubah posisi suatu elemen HTML secara vertikal. Fungsi translateY(px) sama seperti menggunakan property CSS position absolute dengan menggunakan property CSS top dan bottom.

Penggunaan translate hasilnya sama misalnya dengan penggunan position yg tidak akan menghipnotis elemen pada sekitarnya. Bedanya kalo penggunan position, benar - sahih memaksimalkan kemampuan browsernya. Sedangan kalo translate, memaksimalkan penggunaan Hardware acceleration jadi yang bekerja adalah GPU ( graphical processing unit) atau VGA card perangkat kita. Sehingga menggunakan begitu performance nya jauh lebih baik daripada menggunakan position.

Penggunaan nilai satuan translate sama menggunakan saat menggunakan scale. Sama-sama menggunakan satuan pixel ( px ). Nilai dari property tadi sanggup diberikan 1 nilai property atau multiple nilai property. Untuk penjelasannya silakan lihat contoh dibawah ini :

			<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: translate(35px); 		} </style>

			<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-color: purple; 			margin: 50px auto; 			transform: translate(35px, 200px); 		} </style>

Contoh 1 menggunakan nilai translate sebesar 35px, sehingga membuat kotak bergerak ke arah kanan sebesar 35px. Sedangkan contoh 2 menggunakan satu nilai translate tapi untuk 2 sumbu horizontal dan vertical. Dengan sumbu horizontal sebesar 35px sehingga kotak bergerak ke arah kanan sebesar 35px, dan sumbu vertical sebesar 200px, sehingga kotak bergerak ke arah bawah sebesar 200px.

Finally done!. Catatan saya tentang property CSS3 transform fungsi translate ini, semoga bisa bermanfaat bagi sahabat-sahabat yg sama seperti aku sedang belajar web design. Bagi teman-sahabat yg butuh beberapa contoh transform, silakan download di bawah ya !

Happy blogging guys ?????? ....