Sedikit Mengenal CSS3 Transform

Pada postingan kali ini kita akan sedikit memahami tentang CSS3 transform yang merupakan sebuah property yang memiliki beberapa value seperti scale, translate , rotate . 





Penggunaan Dasar
Untuk menggunakan property ini kita harus menggunakan prefix karena pada beberapa browser property transform masih belumlah stabil.

-webkit-transform : fungsiTransform(nilai);
-moz-transform : fungsiTransform(nilai);
-ms-transform : fungsiTransform(nilai);
-o-transform : fungsiTransform(nilai);
transform : fungsiTransform(nilai);

Secara Default , titik tranformasi berada tepat ditengah-tengah element tapi kita bisa merubahnya dengan property webkit-transform-origin seperti pada contoh :

-webkit-transform-origin : 0 0;
-moz-transform-origin : 0 0;
-ms-transform-origin : 0 0;
-o-transform-origin : 0 0;
transform-origin : 0 0;

Nilai pertama adalah nilai untuk X dan kedua untuk Y . Pada contoh diatas kita menentukan titik transform pada (0,0) , bisa dilihat di ujung sebelah kanan atas.

Fungsi-Fungsi Transform
Seperti yang telah dikatakan tadi dalam property transform kita bisa menambahkan berbagai fungsi tranformasi objek seperti scale,translate , rotate.
  • Scale : Fungsi scale akan merubah suatu element berdasarkan scala
  • Translate : Fungsi Translate dapat berfungsi untuk memindahkan objek ke posisi yang kita inginkan
  • Rotate : Artinya berputar pada suatu element sesuai dengan derajat yang diberikan . Nilai untuk fungsi ini memiliki satuan deg , nilai positif akan meutar searah jarum jam dan negatif sebaliknya.
Untuk contoh kita bisa membuat kotak dengan CSS3 Transform

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

    /* penambahan transition */
    -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);
}
#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);
}
#rotate:hover{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}
#rotatex:hover{
    -webkit-transform:rotateX(360deg);
    -moz-transform:rotateX(360deg);
    -ms-transform:rotateX(360deg);
    -o-transform:rotateX(360deg);
    transform:rotateX(360deg);
}
#rotateY:hover{
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
}

HTML
<div id="scale" class="kotak">Scale</div>
<div id="translate" class="kotak">Translate</div>
<div id="rotate" class="kotak">Rotate</div>
<div id="rotatex" class="kotak">RotateX</div>

Resource : Basic http://www.ariona.net/- W3 Scholl

27 komentar

mf sy ambl pertamaxxx :D

Cuman sayang ya kang untuk kode -webkit, -moz, -ms, -o belum mendukung CSS3 :D

iya kang saya juga sependapat ama mas Adhy.. kadang agak gemes juga kalo mau nambahin transform, transition,dll mesti nambahin -webkit, -moz, -ms, -o biar stabil di semua browser :)

Ya itu yang jadi masalah mas ( ga valid CSS3 ) , klu ga dikasih embel2 -webkit, -o, ms, -moz semua efeknya ga bisa tampil maksimal disemua browser hadeeeh

di pom terdekat hhe

iya sih kang itu ganjalannya ... sungguh sangat disayangkan

benar mas .. padahal kreasi dalam efectnya luarbiasa ya mau gimana lagi hee

ya gitu deh mas .. tapi ini hanya untuk pengenalan saja mudah-mudahan tahun depan bisa valid css3 hi

Wah..pertamaxnya duluan di boking mas Rohis...*smile.. :)

boking'y long time mas hahaha

nyimak, dibungkus dl... prakteknya ntar :D

asal gak ada kembalian saja wkwk

pasti masalahnya di valid css3, sugan wh enjing mah tiasa valid kang hehe :D.
Saya juga harus buang embel2 -webkit, -moz, -ms, -o buat validasi css3.

urang ngado'a we ayena mah haha

Keren kan bisa muter muter kitu nya.. he,,
Uyuhan te lieureu oge gambar na :)

sigana postingan ieu gara2 'transform: translate3d(0,0,0)' nya :)

can ngulincir mah haha
kagok nulis artikel ( galau ) padahal teu payu nu kieu teh kang ..
tapi ken biar itung-itung daripada jempling postingan haha ..

hente kang .. tos aya rencana sih cuma di pendem da teu valid tapi dasar nyaeta kang teu sadar nulis ( lg galau heuheuy ) ieu teh tos teu payu zaman ayena mah

ada tuh di lea vareou framework ttg css3 mah, tinggal di sikat ajah brai...hieoheiooe

ari bloglang mah sagala terang hehehe :D

wihihih apal wae lah sip kang urang sikat bersih hehe
owh ben bloglang dilawan hahay

Kode jaman buhun meren nyak?
Wios kang teu payu ge nu penting mah nging masang Kode buntut we :)

wkwkwk pasang 73 kaluar 57 ngageris pajarkeun teh

Saya suka yang css rotate x . hehe

Paling sering gunain yang Rotate :D

sama dong mas ...