CCS Transform

CSS Transform

CSS Transform berfungsi untuk merubah suatu objek tertentu bentuk semula menjadi bentuk yang telah ditentukan tertentu. ha ha ha... masih gak mudeng memang sulit untuk menjelaskan dengan kata-kata. Baiklah lansung saja kita praktikan. 

Jenis - Jenis CSS Transform

1. CSS Transform Rotate


CSS Transform adalah fungsi CSS yang merubah bentuk semula menjadi memutar dari bentuk awalnya dengan putaran yang telah ditentukan dengan menggunakan value "deg" atau putaran berapa derajat sudut. Contoh :
#ketupat{
width:200px;
height:200px;
background:#cccccc;
transform-rotate:(45deg);
-mz-transform: rotate(45deg);        //** untuk browser firefox**//
-ms-transform: rotate(45deg);        //** untuk browser IE**//
-webkit-transform: rotate(45deg);   //** untuk browser opera, chroome, safari**//
}

maka hasilnya akan nampak seperti berikut :








2. CSS Transform Skew


CSS Transform Skew adalah fungsi transformasi atau perubahan menjadi lebih condong atau miring dari bentuk awalnya. Contoh :


#jajar_genjang{
width:200px;
height:100px;
background:#cccccc;
transform:skew(30deg);          //** original **//
-mz-transform: skew(30deg);        //** untuk browser firefox**//
-ms-transform: skew(30deg);        //** untuk browser IE**//
-webkit-transform: skew(30deg);   //** untuk browser opera, chroome, safari**//
}

maka hasilnya akan nampak seperti ini :






3. CSS Transform Scale


CSS Transform Scale adalah fungsi transformasi atau perubahan menjadi membesar atau mengecil dari bentuk semula. Contoh :
#transform_scale{
width:200px;
height:100px;
background:#cccccc;
transform:scale(2,2);                //** original **//
-mz-transform: scale(2,2);        //** untuk browser firefox**//
-ms-transform: scale(2,2);        //** untuk browser IE**//
-webkit-transform: scale(2,2);   //** untuk browser opera, chroome, safari**//
}

maka hasilnya akan tampak seperti berikut ini :











4. CSS Transform Translate


CSS Transform Translate adalah fungsi transformasi yang berfungsi menggeser dari tempat semula. Contoh :
#transform_translate{
width:200px;
height:100px;
background:#cccccc;
transform:translate(20px);                //** original **//
-mz-transform: translate(20px);        //** untuk browser firefox**//
-ms-transform: transalate(20px);        //** untuk browser IE**//
-webkit-transform: translate(20px);   //** untuk browser opera, chroome, safari**//
}

maka hasilnya akan seperti berikut ini :







5. CSS Transform Matrix


Untuk CSS Transform Matrix ini saya kurang mengerti karena jarang saya jumpai yang jelas ini adalah salah satu CSS Transform, untuk perubahan transformasinya dapat dilihat dan dicoba sendiri. 
Contoh :

#transform_matrix{
width:200px;
height:100px;
background:#cccccc;
transform:matrix(20px);                //** original **//
-mz-transform: matrix(20px);        //** untuk browser firefox**//
-ms-transform: matrix(20px);        //** untuk browser IE**//
-webkit-transform: matrix(20px);   //** untuk browser opera, chroome, safari**//
}

maka hasilnya akan seperti berikut ini :

Demikian dari saya tentang CSS Transform kurang lebih saya mohon, dan saya samapaikan terima kasih.