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 salah satu property CSS3 yang masih eksperimental. Jadi apabila kita ingin gunakan property ini dan bisa berjalan di semua browser, jangan lupa implementasi penggunaan vendor prefixes di awal sintaknya.

menjelaskan fungsi-fungsi transform seperti scale, rotate, skew, dan translate

<!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 untuk memperbesar dan memperkecil ukuran sebuah elemen HTML. Fungsi scale ini menggunakan satuan angka seperti 0, 0.6, 1, 1.2, 2, 2.5, 3, 4, 5, … dan tak terhingga. Penggunaan fungsi scale ini ada 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 penggunaan scale pada property css3 transform

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 bisa mengkombinasi penggunaannya agar lebih interaktif, seperti mengkombinasi dengan menggunakan kombinasi dengan kelas pseudo class :hover.

b. Rotate ( Memutar Elemen HTML )

Fungsi rotate pada property CSS3 transform adalah untuk memutar atau merotasi sebuah elemen HTML baik searah dengan jarum jam atau berlawanan dengan arah jarum jam. Satuan yang digunakan untuk fungsi rotate ini adalah derajat ( deg ). Nilainya menggunakan 0 - 360deg. Baik itu nilai positif apabila perputarannya searah dengan jarum jam, atau negative apabila perputarannya berlawanan dengan arah jarum jam kita menggunakan nilai 0 – 360deg. Penggunaan fungsi rotate ada 3 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>

penggunaan fungsi rotate pada property css3 transform

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 bisa memberikan 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 dari satu nilai property. Untuk lebih jelas silakan lihat contoh 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>

hasil penggunaan fungsi skew pada property css3 transform

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 seperti dengan penggunan position yang tidak akan mempengaruhi elemen di sekitarnya. Bedanya kalo penggunan position, benar - benar memaksimalkan kemampuan browsernya. Sedangan kalo translate, memaksimalkan penggunaan Hardware acceleration jadi yang bekerja adalah GPU ( graphical processing unit) atau VGA card perangkat kita. Sehingga dengan begitu performance nya jauh lebih baik daripada menggunakan position.

Penggunaan nilai satuan translate sama dengan ketika menggunakan scale. Sama-sama menggunakan satuan pixel ( px ). Nilai dari property tersebut bisa 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>

hasil penggunaan fungsi translate pada property css3 transform

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 mengenai property CSS3 transform fungsi translate ini, semoga bisa berguna bagi teman-teman yang sama seperti saya sedang belajar web design. Bagi teman-teman yang butuh beberapa contoh transform, silakan download di bawah ya !

Happy blogging guys 😉😊😉 ....

2 comments for "Property Transform Pada CSS3"

Joxa11/21/2020
Bg tolong ajrin cara merubah rumus html bg
Joxa11/21/2020
Bg tolong bantu bg ini rumus nya giman ni

num_shadow
rotate: false
xy: 767, 1
size: 124, 124
orig: 126, 126
offset: 1, 1
index: -1
star
rotate: false
xy: 630, 31
size: 82, 82
orig: 82, 82
offset: 0, 0
index: -1
yun1
rotate: false
xy: 324, 103
size: 219, 124
orig: 221, 126
offset: 1, 1
index: -1
yun2
rotate: false
xy: 258, 5
size: 121, 83
orig: 123, 85
offset: 1, 1
index: -1

Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan

Digitaladies Room

Property Transform Pada CSS3

2 comments for "Property Transform Pada CSS3"

Menu Halaman Statis