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.
Secara Default , titik tranformasi berada tepat ditengah-tengah element tapi kita bisa merubahnya dengan propertywebkit-transform-origin seperti pada contoh :
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.
CSS
HTML
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 : 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.
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
mf sy ambl pertamaxxx :D
BalasHapusdi pom terdekat hhe
HapusWah..pertamaxnya duluan di boking mas Rohis...*smile.. :)
Hapusboking'y long time mas hahaha
HapusCuman sayang ya kang untuk kode -webkit, -moz, -ms, -o belum mendukung CSS3 :D
BalasHapusiya sih kang itu ganjalannya ... sungguh sangat disayangkan
Hapusiya 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 :)
BalasHapusbenar mas .. padahal kreasi dalam efectnya luarbiasa ya mau gimana lagi hee
HapusYa 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
BalasHapusya gitu deh mas .. tapi ini hanya untuk pengenalan saja mudah-mudahan tahun depan bisa valid css3 hi
Hapusnyimak, dibungkus dl... prakteknya ntar :D
BalasHapusasal gak ada kembalian saja wkwk
Hapuspasti masalahnya di valid css3, sugan wh enjing mah tiasa valid kang hehe :D.
BalasHapusSaya juga harus buang embel2 -webkit, -moz, -ms, -o buat validasi css3.
urang ngado'a we ayena mah haha
HapusKeren kan bisa muter muter kitu nya.. he,,
BalasHapusUyuhan te lieureu oge gambar na :)
can ngulincir mah haha
Hapuskagok nulis artikel ( galau ) padahal teu payu nu kieu teh kang ..
tapi ken biar itung-itung daripada jempling postingan haha ..
Kode jaman buhun meren nyak?
HapusWios kang teu payu ge nu penting mah nging masang Kode buntut we :)
wkwkwk pasang 73 kaluar 57 ngageris pajarkeun teh
Hapussigana postingan ieu gara2 'transform: translate3d(0,0,0)' nya :)
BalasHapushente 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
Hapusada tuh di lea vareou framework ttg css3 mah, tinggal di sikat ajah brai...hieoheiooe
BalasHapusari bloglang mah sagala terang hehehe :D
Hapuswihihih apal wae lah sip kang urang sikat bersih hehe
Hapusowh ben bloglang dilawan hahay
Saya suka yang css rotate x . hehe
BalasHapussama dong mas ...
HapusPaling sering gunain yang Rotate :D
BalasHapussama sob ...
Hapus