CSS - Tranformasi

Jika sebelumnya kita sudah membahas tentang CSS Transisi, maka kali ini ada juga CSS yang mirip dengan transisi tersebut. Properti CSS ini juga menyediakan opsi lain untuk mengubah penampilan elemen yang ada di halaman kita. Bahkan bisa mengubah elemen 2D dan 3D di halaman situs kita. CSS ini kita sebut CSS Transformasi. Properti ini malah lebih keren karena kinerjanya bisa sebagai translate(), rotate(), scale(), skew() and matrix() dan bagaimana masing-masing ini dapat bekerja dalam CSS3 Anda.

Opsi pertama saya akan menunjukkan bagaimana CSS transformasi:translate() bekerja untuk anda. Translate disini bukan maksudnya menerjemahkan ya?mungkin pikiran awal yang terlintas, oh web kita dalam bahasa Indonesia bisa diterjemahkan dengan CSS ini. Namun maksud translate disini adalah memindahkan elemen kemudian kita bisa menentukan posisi dimana parameter x kita beri nilai untuk jarak samping dan parameter y untuk jarak tingginya. Jika x bernilai positif maka bergerak kearah kanan dan jika negatif maka bergerak kekiri. Sedangka y jika positif akan bergerak kebawah dan jika y negative akan bergerak ke atas.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

.box{
	width:100px;
	height:100px;
	background:red;
	margin:20px;
	color:white;
	text-align:center;
	line-height:50px;
	float:left;
	font-family:calibri,sans-serif


	-webkit-transition:-webkit-transform .5s ease;
	-moz-transition:-moz-transform .5s ease;
	-ms-transition:-ms-transform .5s ease;
	-o-transition:-o-transform .5s ease;
	transition:transform .5s ease;
}

#translate:hover{
	-webkit-transform:translate(20px, 30px);
	-moz-transform:translate(20px, 30px);
	-ms-transform:translate(20px, 30px);
	-o-transform:translate(20px, 30px);
	transform:translate(20px, 30px);
}


 </style>
</head>
<body>


<div id="translate" class="box">Translate</div>

</body>
</html>

Hasilnya :

transformasi1

Selanjutnya adalah transformasi scale(). Disini bisa saya katakan ayo kalau blok kita berukuran kecil kita bisa membuatnya lebih lebar atau lebih tinggi. Ya blok saya bisa membuatnya dua kali lebih lebar atau lebih tinggi. Jadi scale()digunakan untuk melebarkan atau menjauhkan elemen, dengan menambah atau mengurangi ukuran elemen. Perhatikam contoh berikut:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

.box{
	width:100px;
	height:100px;
	background:red;
	margin:20px;
	color:white;
	text-align:center;
	line-height:50px;
	float:left;
	font-family:calibri,sans-serif


	-webkit-transition:-webkit-transform .5s ease;
	-moz-transition:-moz-transform .5s ease;
	-ms-transition:-ms-transform .5s ease;
	-o-transition:-o-transform .5s ease;
	transition:transform .5s ease;
}

#scale:hover{
	-webkit-transform:scale(2);
	-moz-transform:scale(2);
	-ms-transform:scale(2);
	-o-transform:scale(2);
	transform:scale(2);
}

 </style>
</head>
<body>

<div id="scale" class="box">Scale</div>
</body>
</html>

Hasilnya :

transformasi2

Berikut elemen lainnya setelah scale(). adalah skew. Jenis transformasi ini kadang sulit untuk saya jelaskan apa yang dilakukannya. Apa yang Anda lakukan adalah Anda memutar file elemen sejumlah derajat di sekitar sudut x dan angka tertentu derajat di sekitar sudut y. Jadi di sini saya akan menunjukkan kepada Anda sebuah kemiringan, 20 derajat. Anda memulai di sini dan Anda akhirnya baik berubah dengan sudut yang sangat aneh. Dan sekali lagi sangat sulit untuk menunjukkannya kepada Anda ketika saya menatap layar, jadi saya berharap Anda mencobanya sendiri dengan contoh berikut:


<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

.box{
	width:100px;
	height:100px;
	background:red;
	margin:20px;
	color:white;
	text-align:center;
	line-height:50px;
	float:left;
	font-family:calibri,sans-serif


	-webkit-transition:-webkit-transform .5s ease;
	-moz-transition:-moz-transform .5s ease;
	-ms-transition:-ms-transform .5s ease;
	-o-transition:-o-transform .5s ease;
	transition:transform .5s ease;
}


#skew:hover{

	-ms-transform: skew(20deg); /* Support IE 9 */
    -webkit-transform: skew(20deg); /* support Safari */


 </style>
</head>
<body>

<div id="skew" class="box">Scale</div>
</body>
</html>

Hasilnya :

transformasi3

Opsi berikutnya dan terakhir adalah matriks. Ketika Anda menggunakan matriks, Anda dapat menggabungkan semua transformasi 2D metode menjadi satu perintah sekaligus. Saya tidak pernah menggunakan ini, karena saya temukan itu terlalu membingungkan untuk mengingat skala yang mana, yang mana memutar, yang satu ini miring. Matrix(), menggabungkan semua opsi sebelumnya seperti rotate(), scale() dan skew(), maka hasilnya transformasi tersebut dilakukan bersamaan.

Jadi misalnya dengan memutar, sekarang alih-alih hanya berputar sepanjang sumbu x atau y, kita juga bisa memutar sekitar dimensi z juga. Jadi jika Anda ingin menggunakan 3D rotate, pilihan Anda sekarang berubah: rotateY berapa banyak derajat, rotateX, rotateZ, atau Anda benar-benar dapat mengatakan rotate3d dan berikanitu angka sepanjang setiap dimensi tunggal.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

.box{
	width:100px;
	height:100px;
	background:red;
	margin:20px;
	color:white;
	text-align:center;
	line-height:50px;
	float:left;
	font-family:calibri,sans-serif


	-webkit-transition:-webkit-transform .5s ease;
	-moz-transition:-moz-transform .5s ease;
	-ms-transition:-ms-transform .5s ease;
	-o-transition:-o-transform .5s ease;
	transition:transform .5s ease;
}



#matrix:hover{
	background: #fcfcfc;
	padding: 20px;
	float: left;
	margin: 50px;
	width: 150px;
	height: 150px;
	matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
	-ms-transform: matrix(1,2,-1,1,5,4); /* Support IE 9 */
    -webkit-transform: matrix(1,2,-1,1,5,4); /* support Safari */
    transform: matrix(1,2,-1,1,5,4); /* Standard syntax */
}
 </style>
</head>
<body>

<div id="matrix" class="box">Matrix</div>

</body>
</html>

Hasilnya :

transformasi5

Jika Anda benar-benar hanya mencoba mengubah tampak seperti apa elemen dari awal dan biarkan seperti itu, Anda mungkin ingin berpikir tentang hanya mengambil gambar dan mengotak-atik gambar dan melakukan hal-hal offline. Lebih cepat dan itu tidak menggunakan banyak bandwidth.

Tentu saja, dengan begitu banyak hal yang telah kita bahas penting untuk diingat bahwa Anda sering membutuhkan browser yang bagus untuk mendapatkan transformasi agar berfungsi.