You must enable Javascript in your browser to run or open this site.

Css3 Transform 2D

Setiap orang pasti pernah merasakan rasanya itu sakit, entah itu batuk, pilek, nyeri, lemes, dan 1001 macam penyakit lainnya. Hanya keturunan Fir'aun saja yang kebal terhadap penyakit. Apakah itu dirimu? :D Dilalah kemarin saya sakit yang hampir di vonis dengan penyakit Tifus atau DBD. Kedua penyakit yang sangat bingung dimana saya hampir menerimanya dengan lapang dada. Dibantu do'a, ibadah, dan dukungan orang tua, serta teman dekatku akhirnya saya bisa terbebas dari vonis itu. Alhamdulillah!
CSS3 Transform dapat disebut juga dengan efek perubahan yang terjadi pada elemen asli berdasarkan dari perubahan bentuk (Transformasi). Tahu film animasi Transformer kan? Mirip-mirip lah seperti Css3 yang satu ini hehe. Dalam pengkodean Css3 Transform ini, telah di bentuk dan di bedakan menjadi 5 macam transformasi.
  1. Transform:Translate
  2. Transform:Rotate
  3. Transform:Scale
  4. Transform:Skew
  5. Transform:Matrix
Translate
Dalam menggunakan metode translate() ini, elemen yang seharusnya di tempat (posisi) awal dapat berpindah ke tempat (posisi) lainnya. Elemen akan berpindah searah dengan sumbu X dan sumbu Y. Sumbu X itu arah antara kanan dan kiri, sedangkan Sumbu Y itu arah antara atas dan bawah. Sebagai Contohnya berikut ini :

ORIGINAL
50px
TRANSLATE
(50px, 10px)
transform:translate(50px,10px);
-ms-transform:translate(50px,10px);
-moz-transform:translate(50px,10px);
-webkit-transform:translate(50px,10px);
-o-transform:translate(50px,10px);
translate(sumbuX, sumbuY); Jadi sudah di perlihatkan ada tanda 50px yang berarti hasil penranslatean [susah banget nih ngomongnya] arah Sumbu X atau kanan dan kiri. (-)Angka berarti arahnya ke kiri, sedangkan angka positif kekanan. Sebaliknya dengan Sumbu Y yang bernilai 10 itu. (-)Angka berarti ke atas, sedangkan angka positif ke bawah.

Rotate
Dalam penggunaan metode rotate() ini, elemen yang seharusnya dalam keadaan normal sebelumnya bertransformasi menjadi berputar. Dalam kasus ini derajat (deg) dijadikan alat hitung untuk menenukan kemiringan elemen. Sudah saya posting sebelumnya tentang Css jenis ini [Disini]. Sebagai Contohnya berikut ini :

ROTATE
(10deg)

-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);






Dalam kode Css ini alat pengukur kemiringan ini di namakan degree(deg) atau derajat. Ukuran normalnya suatu kemiringan disini adalah (0deg), lebih dari nol berarti miring ke kanan, sedangkan kurang dari nol alias (-) berarti ke kiri.

Scale
Dalam penerapan metode scale() ini, skala dalam elemen dasar bisa di perkecil ataupun di perbesar. Seperti yang pernah saya post di blog ini [Disini]. Sebagai Contohnya berikut ini :

ORIGINAL
SCALE
(1.2)
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);






transform: scale(1.2) berarti suatu elemen di perbesar sebanyak 1.2x . Titik normalnya adalah (1) kurang dari satu berarti di perkecil, sedangkan lebih dari satu artinya di perbesar.

Skew
Dalam penggunaan metode skew() ini, elemen akan di miringkan tetapi tidak seperti transform:rotate() sebelumnya yang di putar. Untuk lebih jelasnya lihat kebawah :

SKEW
-moz-transform: skew(-20deg, -10deg);
-ms-transform: skew(-20deg, -10deg);
-o-transform: skew(-20deg, -10deg);
-webkit-transform: skew(-20deg, -10deg);
transform: skew(-20deg, -10deg);






Skew() ini menggunakan 2 sumbu sama seperti translate itu. Skew(SumbuX, SumbuY) sumbu X untuk miring ke kanan dan ke kiri, sedangkan sumbu Y untuk miring ke atas dan ke bawah. Hasilnya pun seperti jajargenjang. Lihat pada gambar disini agar lebih jelasnya, Skew.jpg

Matrix
Metode Matrix() ini adalah metode yang terakhir kita dalam efek transformasi di sini. Metode ini adalah gabungan dari metode translate(), scale(), dan skew() membuat sudut pandang yang lebih berbeda. Lihat, sekilas memang tak berbeda dengan Skew() tetapi di kodenya sangat beda.

-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform: matrix(1, -0.2, 0, 1, 0, 0);
-ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
transform: matrix(1, -0.2, 0, 1, 0, 0);






Perhatikan gambar berikut ini! Diambil dari data transform: matrix(1, -0.2, 0, 1, 0, 0); [Disini]. Karena kodenya sekaligus disatukan maka kerumitanpun timbul.

195 comments

  1. Ane udah pernah denger trik kaya gini,tapi baru tau namanya hehehe.. :)

    BalasHapus
  2. wih keren2 tuh,, (y) faris emg brilliant dah,, =))

    BalasHapus
  3. woww...makin mantab aja tutorial mas faris....hehe :)
    (y)

    BalasHapus
  4. To Musa : yaiyalah dah dari lama :D tapi ane baru post sekarang :))
    To Rama88 : hehehe bisa aja lu ram kalau komen :))
    To IT-Soft Center : hehehemakasih ya sob supportnya bang IT :D

    BalasHapus
  5. keren banget nih CSS Transformnya sobat,, saya juga kepnegn belajar CSS sob, soalnya masih awam soal css sob...

    BalasHapus
  6. To Asis Sugianto : iya gan namanya juga Css3 pasti hebat :) ane juga masih tahab belajar :)

    BalasHapus
  7. mati aku sob, gak ngerti, cuma bisa bilang ente cerdas sob :), klo boleh tau, biasanya ini dipakai dimana ya?

    BalasHapus
  8. To Tonnys : ente pasti bisa kok :) ane gak cerdas kok om :| dimana saja juga bisa kok sob di kreasi kreasikan :)

    BalasHapus
  9. Oh jadi Rotate toh namanya!
    Dari dulu mas, saya nyari yang beginian!
    Maasih ya..

    BalasHapus
  10. To Kopiah Putih : hehehe masa sobat daru sekarang tahu sih? kan sobat sering menggunakannya :D hhhe

    BalasHapus
  11. Lumayan datang ke sini dapet ilmu.. :))

    BalasHapus
  12. =)) lha,, emg bner kan ris,, wkwkwk,, gw panggil nya ris aja ya,, wakwakwak,, =)) ohiya yg monopoli waktu itu gimana sih maennya,,> kok gak mau jalan pas di klik start,,? :-o

    BalasHapus
  13. To Awelqq's : hehehe dari pada lumanyun kan? hehehh =))
    To Rama88 : hehehe ya deh ya deh terserah lu aja :D siapa bilang bisa di mainin koplak :)) =)) orang cuman stylenya aja. kalau di mainin susah banget pasti, pake acara bayar duit itu duit duit duit.... =))
    To DODE-XP.COM : iya gan matrix campuran dari metode lain, jadinya keren :) hehe

    BalasHapus
  14. farixsan tips memang mantaaaaaaaaaaaaaaabbbbbbbb hahaha demen guwe.xixixixixi

    sobat selalu memberi yang terbaik untuk dunia blogging
    CSS3 Transform ini memang selain tampil keren yang bisa kita atur menurut keinginan. juga ringan untuk di akses

    sobat memang ajib ajib. (sambil ngacungi 4 jempol) hahaha
    happy blogging

    BalasHapus
  15. kerumitan tersebut akan hilang saat sobat terbiasa menggunakannya.., kalau malas untuk mengetahui fungsi setiap elemen mending pakai cara coba2 aja, dengan memasukkan elemen(angka) yang besar nanti akan ketauan elemen tersebut merubah bagian mananya....:D

    BalasHapus
  16. masih belum ngerti soal yang kaya gituan mas, cuman tw trik dasar blog aja

    BalasHapus
  17. NAch tutur ini yang saya suka,biara agak panjang daribiasanya tapi tujuannya bisa diterima oleh seorang ane,hehehe.
    Ane jadi betah ngendon disini,tapi ane obok-obok page postinganmu ga ada dasar-dasar belajar CSS3 ya.
    Makasih banyak tipnya,ane mau praktekan dulu pada Transform Translate,doakan biar sukses,happy blogging.

    BalasHapus
  18. To Wisata Murah : hehehe aduh sobat berkomentarnya berlebihan banget niiiiiiiiiiiiiiiihhh :)) btw makasih ya sob supportnya :)
    iya sob selain gampang di akses hasilnya pun memuaskan :) ehehe bisa aja nih agan 4 jempol, 5 aja gan kalau bisa :))
    To system of blog : thanks supportnya gan

    BalasHapus
  19. To ToPu : iya sob ane juga sering seperti sobat coba coba, tetapi kurang efek tif bila hanya di coba tanpa pemahaman :) hehe ide bagus komentar bagus :)
    To Yudi Glanter : ini trick dasar belajar css3 sob dari css3 transform hehehe :)
    To Raihan Mar'ie Ramadhan : hehe iya sob ane lupa tentang css transform ini, jadi lupa post deh :)) mayan tuh gan translate biar pindah tempat. bukan translate huruf lho gan :)) =))

    BalasHapus
  20. Main Css terus nih? OK Css pasti sudah melekat dalam hati sobat hehe, Css ok dah.. ditunggu kabar seputar kode Css lainnya sob. Happy Blogging!

    BalasHapus
  21. ii waw..
    keren dah gan..
    sudah benar2 didalam kepala kalo yang urusan ky gini..
    hahah..
    alhamdulillah, akhirnya udah sembuh juga..
    eit, dibawah paket outbound itu juga postingan baru luh gan. yang ane bilang inspirasi dari agan faris..
    monggo di cekibrot..
    hihihi
    tengs gan... :D

    BalasHapus
  22. :-oide itu cuman buat yang malas sob, kalau ndak paham lalu ndak tau sama sekali kan sangat disayangkan dan juga tidak sedikit orang mendapatkan pemahaman dari kebanyakan kasus/pelajaran2 seperti di atas setelah melalui praktek:>

    BalasHapus
  23. To Berbagi Kreativitas : hehehe belajar sob hehe mainnya ntar tahun baru puas puasin :)) huahahaha =)) makasih ya sob kunjungannya, silahkan di tunggu

    BalasHapus
  24. keren nih, , ane suka yang skew skew skew ituu, , sukses gan :)

    BalasHapus
  25. To Outbound Malang : entahlah sobat menganggapnya di luar ataupun di dalam :D hehehe iya gan berkat dukungan semuanya juga nih dan sobat :) ane baru tau gan ada postingan baru di bawahnya postingan lama :D hehe TKP ah
    To ToPu : seharusnya di mengerti, praktek, coba, selesai. nahhh itu sekiranya teory saya mengenai pemahaman :)

    BalasHapus
  26. kalo diluar kan ga di dalem berarti gan?
    ntar ilang lagi. hahah :D
    sore2 gini lagi apa agan faris?
    hv a nice day yoo.. :)

    BalasHapus
  27. Trknya mantap gan.

    kalau website css3generator itu bagus ndak ?

    BalasHapus
  28. To bayu aldi yanshah : hahahah ada apa dengan skew/miring :)) hahaha sukses juga gan :)

    BalasHapus
  29. To Outbound Malang : heheheh bisa aja nih agan :)) sore sore gini ane ya lagi duduk di depan komputer :D tetapi enaknya sih sepedaan bareng temen rame rame :)
    To idm bebas update : kalau dari yang saya amati sih kurang sob, mending yang lainnya aja. ada yang error previewnya sob

    BalasHapus
  30. wah macam rumus fisika aja ni sob make sumbu x and y

    BalasHapus
  31. dibalesnya langsung ke blognya ente sob..
    ehhehehe..
    wadaw, peringatan ya ini? huahaha :D
    maaf ya gan..
    oke dah gan ditunggu aja ya balesannya..
    besok saya off dulu. ada kegiatan outdoor.
    secepatnya ya saya bales satu persatu..
    hihi
    peace gannn ^.^v

    BalasHapus
  32. wow bro mantaps bisa jadi bahan acuan nih bikin desain :D

    BalasHapus
  33. numpang tanya gan, cara bikin efek link kayak :

    1. Transform:Translate
    2. Transform:Rotate
    3. Transform:Scale
    4. Transform:Skew
    5. Transform:Matrix
    dipostingan ini gimana ya ?

    BalasHapus
  34. To WahidBlog : ada juga Matematika sob yang sering menggunakan sumbu :D hehehe iya gan
    To Outbound Malang : oalahhhh okelah ane kelpaan terus nih gan :)) gak ada peringatan apa apa kok gan :) oalah sibuk dunia offline lagi nih sobat hhehehe sukses deh, hati hat :)
    To randy oktaran : iya sob ente kan rajanya desain :) hehe

    BalasHapus
  35. To 4JIE BLOG : makasih ya gan supportnya :) itu gini caranya :
    <a href="#NAMA"></a>

    Letakin kode berikut jauh jauh dari <a href> tadi
    <div id="NAMA"></div>
    setiap link itu di klik pasti arahnya ke div itu.

    BalasHapus
  36. makin ajib aja sob tutorialnya.terus berkreasi ya sob...

    BalasHapus
  37. Mungkin sobat dapat berbicara dengan cara pandang seperti itu sekarang, namun kalau ntar sobat sudah banyak berpengalaman dan memahami segala sesuatu mengenai teknologi ini nantinya akan mengerti sendiri,...:D

    Saya beri bocoran sedikit saja. Tapi jangan minta lagi ya =))

    pernahkah sobat mengerti bagaimana 2+2=4? Kalau sobat mengerti silahkan jelaskan dengan gamblang atau sobat memang hanya menghapal saja??? Itulah nanti akan sobat temukan jawabannya kalau sobat mendalami ilmu komputer.. tapi kalau sobat tidak berminat di ilmu komputer, minatnya di kedokteran ya ndak papa sih... ;)

    Just my experience to share with all the people in the world. Semoga bocoran yang sedikit tersebut bermanfaat. (y)

    BalasHapus
  38. jalan jalan disini menyapa mas farixsan, selamat mas

    BalasHapus
  39. To Alprablog : semoga bermanfaaat ya sob :)
    To AGeboy : hehehe oke sob makasih ya sob supportnya :)
    To willy alam : thanks (y)

    BalasHapus
  40. To ToPu : ane tau ente orang IT dan mengerti soal pemahaman dan cara cara menjadi seorang IT. IT disini yang jago komputer lah :) .
    begini saja deh, oke sobat inginkan matematika :D tetapi apakah bisa 138 x brapa = 11.5 ? apakah sobat akan coba coba? :) tentu menggunakan cara kan? sama halnya dengan rumus ini. ini rumus lho, ya kan? seperti matrix(x,x,x,x,x,x) bukan kah itu rumus? tinggal bagaimana kita menghafal rumus tersebut.

    BalasHapus
  41. To WahidBlog : selamat malan mas wahid :) selamat menikmati perjalannnya!

    BalasHapus
  42. widih, di sini totorial css nya lengkap, dan selalu baru. ijin pakai referensinya kalau saya mengalami kendala gan. makasih sebelumnya

    BalasHapus
  43. :)) benarkan, sobat hanya akan terus menerus menanyakan banyak hal yang sebenarnya hal tersebut belum waktunya sobat untuk ketahui :D

    Ketika seorang anak balita memegang setrika yang masih nyala, maka kita melarangnya, mungkin anak tersebut geram dan menolak semua penjelasan yang kita berikan kepadanya namun suatu saat kita percaya suatu saat nanti pada waktunya dia akan mengetahui dengan sendiri tanpa kita peringatkan.

    Mungkin sobat menganggap hal tersebut(matematika) tak da hubungannya sama sekali dengan ilmu komputer, tapi percayalah hal tersebut sangatlah berkaitan, sobat sudah diajarkan defferensial/integral?? mungkin bagi sobat hal tersebut hanyalah matematis, namun dalam ilmu komputer perhitungan tersebut sangat sering dipergunakan dan menjadi bagian dalam ilmu komputer. :D

    akan Saya jawab pertanyaan sobat, namun ini bocoran yang terakhir dan benar2 yang terakhir yah, nanti tanya - tanya lagi =))

    Pengetahuan ini mungkin hanya akan sobat temukan dari Saya jadi, kalau Saya boleh menilai sobat adalah manusia yang paling beruntung yang telah Saya kasih banyak bocoran ilmu menganai komputer but ini yang terakhir yah =))

    Oke, yang sobat tanyakan adalah 138 x brapa = 11.5? Kunci jawabannya adalah "POLA". Ya rumus juga merupakan pola. kalau dalam ilmu komputer hal tersebut sobat hanya tidaklah lebih dari sekedar mengubah suatu variabelnya saja. Dan pola tersebut tentu memiliki sesuatu yang harus dimengerti. Apakah sobat merasa setelah tau rumus tersebut sobat merasa paham? Atau sobat benar2 mengerti tentang rumus tersebut atau sobat tidak lebih hanya sekedar menghafal saja?

    Santai saja sobat, tak perlu dipaksakan untuk dimengerti, kalau memang sobat berminat, di jenjang perguruan tinggi nanti sobat dapat mengambil prodi ilmu komputer.

    Oke demikian semoga yang sedikit bisa bermanfaat bagi sobat dan pembaca lainnya. (y)

    BalasHapus
  44. lama tak berkunjung ke blog sahabat, gimana kabarnya sekarang???

    BalasHapus
  45. Trick terbaru lg nigh Sobat, thanks yaa karena Slalu update memberikan posting yg hanget,

    Lanjut berkarya Sobat!

    BalasHapus
  46. To sejuta trik blogger : semoga bermanfaat ya sob tutorialnya :) silahkan silahkan :)
    To Polbeng Kidz : baik baik saja sob sungguh :) baca saja tuh yang paling atas ada kabar ane :)

    BalasHapus
  47. To ToPu : rupanya sobat master komputer ya :) ane salah bicara klau gitu :D hehe intinya : rumus boleh di hafalin dan boleh tidak. :)) simple bukan? :))
    To MHARJIPES.COM : makasih sobat dukungannya, semoga bermanfaat :)

    BalasHapus
  48. oh..ternyata pake css transform. Saya kira sebelumnya pake image yang telah di edit sedemikian rupa di PS..weleh-weleh..ini bagus juga buatgue yang suka posting gambar...nice share and happy blogging!

    BalasHapus
  49. wah keren juga ya ilmu

    walau ga ngerti css3 tetap kubaca biar tambah pengetahuan

    mantab... :)

    BalasHapus
  50. Sebenarnya tidak sesimple itu sob, tapi sepertinya lebih baik sobat anggap aja semua itu simple, tak perlu dipikirkan terlalu mendalam, coz ntar kalu Q jelasin ntar tambah panjang lagi =))

    BalasHapus
  51. keyeeen; ane kemarine ngedit css3 orang malah berantakan wkwkwk
    yang ini jadi ngiler pengin nyoba.. lembuut n romangtis motionnya
    thanks cssna :D

    BalasHapus
  52. duh susah ini mah ilmunya belum sampe situ:((

    BalasHapus
  53. keren juga ni sob,,,nambah pengetahuan lg

    BalasHapus
  54. To Iskaruji dot com : iya gan pakai css3 transform untuk merubah elemen apapun termasuk gambar, tulisan ataupun kotak lainnya :) bisa banget tuh sob :D
    To anisayu : semoga bermanfaat ya buat mba anisayu sendiri :)
    To ToPu : heheheh ya aja dah :D lagi pula ane tak mengerti maksud sobat dari kata "tidak simple" hehehe
    To anak smpku : iya gan css3 itu sangat keyen di pandang mata :) semoga bermanfaat ya gan :)
    To saryadi nilan : pelajari saja sob pelan pelan :)

    BalasHapus
  55. To >>> Ichwan HAUSGAME : semoga bermanfaat ya sob postingannya :)
    To Ф дфѕдғфдғ Ф : hehehe kenapa miring miring gan? hehehe

    BalasHapus
  56. Nyimak pelajaran baru...
    ayiiiik..

    BalasHapus
  57. lu udah kayak dosen gw aja sob, hahahaha.. bener2 mumet dah gw kalo ngebahas ginian :(

    BalasHapus
  58. wah ... terus terang aja aku blom nyampe situ pelajarannya :-/

    BalasHapus
  59. bagus bner sob,,, dan gmana cara buat blog kaya sobat ini,,, :D

    BalasHapus
  60. oooo hebat sob atu ini belajar ilmu yg ginian, ane ngikut aja deh :)

    BalasHapus
  61. terbawax :)). hebat sob selalu ada pengembangan css nya, maju terus sob pantang KO hehe

    BalasHapus
  62. bruakakkaka,, surim,, kirain bisa dimaenin,, =)) =)) gw udah back to blogging lagee,, udah posting tuh,, maaf kemaleman post nya,, :D

    BalasHapus
  63. apalagi saya Rama88,back trus kesini.wkkkwkw...D

    BalasHapus
  64. Suer ga ngerti gan.. bingung ga tau maksudnya.

    BalasHapus
  65. datang lagi nih sobat, belajar efek transform di blog sobat...

    BalasHapus
  66. Kunjungan dan belajar kembali si sini sobat

    BalasHapus
  67. To NgeCis : seilahkan disimak sobat semoga bermanfaat :)_
    To dhenok habibie : hehehe bisa aja ente gan :D gila aja dosen dosenan :D masa sih mumet?
    To eha : di simak saja sob code dan efek efeknya :)

    BalasHapus
  68. To waroeng coffee : semoga bermanfaat ya bagis sobat dan keluarga =))
    To Deganshah Putra : hehehe oke sob ane maju ters sobat :)) hihihi
    To gang tutorial : css3 transform memang keren gan :)

    BalasHapus
  69. To komunitas blogger madura : silahkan di pelajari dan disimak sobat :)
    To Rama88 : gimana sih lu ram :D mana mungkin juga bisa di mainin, google juga susah kali buatnya :D TKP lah langsung =))
    ToAGboy : hehehe tau tuh dia memang :D temen ane sih :D

    BalasHapus
  70. To DODE-XP.COM : silahkan jalan jalan :)
    To Bengkel Bangun : ini penerapan css3 transform gan, css3 transform ada 5 jenis :)
    To WahidBlog : silahkan jalan jalan :)
    To Asis Sugianto : silahkan di pelajari dan disimak semoga bermanfaat kelak dan sekarang :)

    BalasHapus
  71. To cardiacku : hehehe selamat belajar dan beraktivitas kembali :)

    BalasHapus
  72. Lumayan yang Transfom rotate, saya ambil ya.. hehehe.. :))

    BalasHapus
  73. pusiiiiiiingg... hehe, otakku udh mumet ama kerjaan yg numpuk nih sob.. :D

    BalasHapus
  74. To Awelqq's : semoga bermanfaat ya sobat transform rotatenya :)
    To Penghuni 60 : ooooalah git ya sob :) yaudah siapa tau lain hari membutuhkan :)

    BalasHapus
  75. amin.....
    doamu membuatku yakin
    dan tersenyum dari dalam batin

    trimakasih....

    BalasHapus
  76. To anisayu : sama sama mba hehehe :D
    salam hangat ya

    BalasHapus
  77. alhamdulillah, senang mengetahui sobat sudah sehat kembali seperti semula :-)

    BalasHapus
  78. yah emang dari dulu kamu keren lah :D..
    briliant..

    BalasHapus
  79. Bisa buat referensi desain blog biar bisa miring2 gtu. hehe
    thanks Sob.. :D

    BalasHapus
  80. dateng di siang hari mas semoga kau sehat selalu

    BalasHapus
  81. css3 menghemat load dan tetep artistik walau tanpa image, thx :)
    waktu awal kemari dulu, ane kira dirimu dah kuliah..
    waktu smu kemarin ane hobinya masih main kelereng :D

    BalasHapus
  82. keren2 sob tutorialnya, tapi ane kurang ngerti yang Skew n Matrix. maksudnya jadinya kaya gmn sob?

    BalasHapus
  83. wah keren..
    tpi pusing mau mulai dari mana :(

    BalasHapus
  84. mf gan..,klo org awam css kyk sy gk ngerti yg kyk gituan..,usul sy gmn klo kapan2 posting dunk tentang dasar CSS..., mantap dah ilmux :)

    BalasHapus
  85. bagus banget ya. Pengen banget belajar tentang hal itu. Tapi kok susah ya untuk memahaminya

    BalasHapus
  86. tansformasi :))
    ---berubaaaahhh~ mantepp~

    BalasHapus
  87. Mantap sob... Lanjutkan!
    Mampir balik blog ane sob...
    Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    BalasHapus
  88. berkunjung gan :)
    oiya saran ane buat logo ente yang tulisan "IPS" yang efek emas ntuh , ,
    jangan banyak2 bevel ma embossnya ^^

    BalasHapus
  89. Tipsnya di sini memang selalu bagus sob..Kunjungan lagi di sini.
    Oh ya ada award buat sobat kalau berkenan diambil ya di sini sobat
    http://cardiacku.blogspot.com/2011/12/award-akhir-tahun.html

    BalasHapus
  90. Susah untuk lihat komentar ane yang pertama saking banyaknya.Absen pagi saja sob,kemana nieh,rupanya admin lagi sibuk ofline yach?
    Yang penting U sehat sob,happy blogging aja.

    BalasHapus
  91. Kunjungan silaturahmi di pagi hari saudaraku sambil membaca tips postingannya kali ini

    BalasHapus
  92. nah mampir lagi di pos yg sama :D

    BalasHapus
  93. semoga sehat selalu dan kagak sakit lagi sob...tidurnya jangan malem2 brow,jaga tuh kesehatan karna sehat itu mahal banget harganya..,,tapi ngomong2 tipnya asik nih..

    BalasHapus
  94. jalan-jalan sob........sambil nungguin artikel terbarunya...

    BalasHapus
  95. mantep banget dehh kang faris. . .

    ijin nyoba + copas buat belajar kang. . .

    BalasHapus
  96. sore gan.
    bagemana kabar hari ini?
    tak nampak batang hidungnya..
    semoga bukan karena sakit (lagi). :)

    saya pas baca komen2nya agan sama agan ToPu ga tau kenapa senyum2 sendiri. jadi inget perdebatan saya sama temen2 saya di SMA dulu..
    wahahaha

    ok dah gan, selamat beraktifitas aja..
    :)

    BalasHapus
  97. faris lu masih sakit ya :(( cepet sembih ya,, banyak2 istirahat,, :(

    BalasHapus
  98. hmm mantapp lebih jelas dan mudah dimengerti daripada post ane yg dulu wkwkwkw. =))

    BalasHapus
  99. ehhehe, ada yg ultah ternyata, pantesan gak muncul2 =)) happy b'day ya,, :D ucapan nya udah di wall FB,, wkwkkw :))

    BalasHapus
  100. oh ya semoga cepet sembuh dari sakitnya , dan kurangi bermainnya ya :/

    BalasHapus
  101. doaku menyertaimu sobat , ditunggu kembalinya :(

    BalasHapus
  102. Faris Ultah nih , HBD ya semoga panjang umur serta sehat selalu. dan diberi kesembuhan atas penyakitmu :)

    BalasHapus
  103. Mantap.... Mampir balik blog ane sob...Berbagi HACKING, TWEAKING, SOURCE CODE, SOFTWARE, GAME, dll

    BalasHapus
  104. gw dateng lagi bawa hadiah ultah,, wkwkkwkw, =))
    di buka ya faris: Click Here =))
    semoga terhibur dan lekas sembuh,, :(

    BalasHapus
  105. ajip kren abis sob,faris emang masternya CSS :),wah faris ultah yah walaupun kayaknya agak telat saya ucapkan selamat ulang tahun semoga panjang umur and panjang segalanya lah =)) =))

    BalasHapus
  106. dateng lagi sobat faris gimana kabarnya

    BalasHapus
  107. oh lagi ultah to gan?
    woalahh, ya udah saya ikut meramaikan dsni..
    selamat ultah, dan semoga ga sakit2 lagi, sehat selalu..
    get older get better gan.. :)

    BalasHapus
  108. To BlogS Of Haryanto : alhamdulillah ya sob hehe sesuatu banget nih bisa sehat seperti semula :)
    To socafahreza's blog : hehehe bisa saja nih sobat komennya :)
    To DODE-XP.COM : silahkan jalan jalan :)
    To Prozonas : hehehe asalkan untuk otaknya jgn di buat miring juga sob :))
    To blog alternative : hehe semoga bermanfaat ya sob ilmunya

    BalasHapus
  109. To Yudi Glanter : makasih ya sob doa kesembuhannya :)
    To alkatro : itulah kehebatan dari css3 itu sob :) hehe. eh masa sih sob mengiranya kuliah? :D wah kalau gitu salah ya sob. ane juga suka main kelereng :))
    To Galau'ers : wahhh masa sib sob berkunang kunang? :D
    To Zona Download Gratis : skew itu artinya miring. yaitu memiringkan suatu elemen dengan sumbu Y atau X. kalau matrix itu gabungan dari beberapa jenis css3 transform itu. entah translate, skew, dan scale.
    To Galau'ers : mulai dari mananya ada di hati sobat sendiri :)

    BalasHapus
  110. To El3kTr0 : thanks blogwalkingnya :)
    To Rohis Facebook : ini dasar dasar sob :) dasar dasar css3 :)
    To CORETAN HIDUP : susah dimananya sobat? :) pelan pelan saja sobat belajar
    To WahidBlog : silahkan jalan jalan sobat :)

    BalasHapus
  111. To AGeboy : makasih atas kedatangannya
    To Nurmayanti Zain : hehehe iya sob mirip transformer hehehe :)
    To Black Angel Syndicate : promosi ya gan? :)
    To Bayu Aldi Yanshah : oke deh sobat makasih ya sob saran emboss bevelnya itu hehehe :) ane masih cupu PS nih sob

    BalasHapus
  112. To cardciacku : wah makasih ya sob kunjnugannya :) waduh dapat tag lagi ya gan =)) gimana ya nih :D
    To Raihan Mar'ie Ramadhan : di search aja gan ctrl+F :) ane aja gitu kalau mau cari komentar :D iya gan ane lemas sekali :(
    To abufarras : silahkan di baca sobat :) semoga bermanfaat
    To mania-xp : sama sama :)

    BalasHapus
  113. To waroeng coffe : makasih sobat kedatangannya :)
    To binkbenk : iya gan makasih banyak ya sobat supportnya :) ane juga gak akan tidur malam malam lagi sobat hanya demi dumay :) semoga bermanfaat
    To peristiwa penting 2011 : silahkan di tunggu sobat artikelnya :)
    To Obat Alami Jelly Gamat Gold G : silahkan di coba sobat :) jgn lupa cantumkan link bila mengcopas :)

    BalasHapus
  114. To Outbound Malang : 2 hari kemarin ane di kagetkan lagi sobat dengan penyakit yang menyerang mata saya yang membuat saya tidak boleh main komputer. wahahaha iya gan ane salah berdebat gan :D seharusnya ane tak berdebat dengan master IT seperti ToPu hehe :D
    To Asis Sugianto : semoga bermanfaat ya sob css3nya :)
    To Rama88 : iya ram masih sakit gua lemes. bawaannya pengen tidur mulu :D
    To Mbah Qopet : masa sih mbah :D ane lupa ente pernah posting ginian :D hehe

    BalasHapus
  115. To Rama88 : hehehe makasih banyak ya sobat udah banyak sekali mengucapkan selamat ultah :) (lho sobat lagi) hehe makasih ram :D
    To Mbah Qopet : makasih ya sob supportnya :) ane kurangi bermain kompternya :) hehe makasih ya sob ucapan selamat hari ulang tahunnya :) makasih juga untuk hadiah persahabatannya sobat :) aminnnnnn!!! semoga terkabul ya meskipun tuhan tak baca internet :D
    To Black Angel Syndicate : thanks prommosinya :)
    To Rama88 : makasih banyak ya ram hadiah ulang tahunnya :D keren banget bisa bergetar getar gitu :D memang mantap dahh!!! aminn!

    BalasHapus
  116. To BLOGCUNAYZ : makasih ya sob sudah mau ikut mendoakan ane dalam keadaan suka maupun duka :) makasih ucapan selamat ulang tahunnya :)
    To WahidBlog : baik sobat :) ehe makasih ya
    To Putbound Malang : iya mas maaf ya baru bisa nyapa sobat hari ini :( makasih ya doanya, semoga bisa terkabul :)

    BalasHapus
  117. Happy birthday aja dech,ko ga ngundang-undang nieh.
    Selamat sore kawan,maksih kunjungannya.
    Happy blogging.

    BalasHapus
  118. To Galau'ers : kwowkowkow biar terkesan lebih enak lah :)) =))
    To Raihan Mar'ie Ramadhan : makasih ya sob ucapan selamat ulang tahunnya :) hehehe makasih ya, makasih juga untuk kunjugan sore ini kawan :) happy blogging to :)

    BalasHapus
  119. ada yang ultah nih...hmmm??
    Happy Brithday ya sob.mga makin sukses..:)

    BalasHapus
  120. To Ageboy : aduuhh makasih banyak ya sobat selamat uldang tahunnya :) aduh jadi tambah semangat lagi ngeblogging :)

    BalasHapus
  121. wah kemren pasang rotate, sekarang udah di lepas..
    coz gak cocok .. :))

    BalasHapus
  122. To SaMuel : kenapa gak cocok sob rotatenya? :D hehehe

    BalasHapus
  123. wah aku baru berkenalan yg begini, kubaca dan pelajari untuk nambah pengetahuan ilmu yg mantab... :)

    BalasHapus
  124. sip deh penjelasannya, matrix sepertinya keren tuh soalnya gabungan beberapa css3

    BalasHapus
  125. Wuih keren namanya juga master.Alhamdulillah ya master, akhirnya sehat kembali master faris.

    BalasHapus
  126. kunjungan malam mas brow...wah, template penuh kejutan yang keren nie...semoga kamu tetap eksis memberikan hal yang baru dalam dunia blogging ya mas brow :D

    BalasHapus
  127. To Lutfi : hehehe nda rumit jika kerja keras :)
    To BlogS of Hariyanto : makasih sobat kehadiran dan sapaannya :)
    To Galau'ers : okelah gak untuk kesobat :D huahaha oke gan! =)) :))

    BalasHapus
  128. To anisayu : hehehe silahkan di baca semoga bermanfaat ya mba :)
    To Liandri : iya gan alhamdulillah sudah paham paham :)
    To Bisnis Online Blog : wahhh ojo panggil master master gan :) hehe
    To deny : amin sob :) o iya ane lupa dengan template ya :-o maafkan ane ya sob, nanti ane selesaikan :)

    BalasHapus
  129. absen malam ni sobatku, oh ya upadetannya udah :D

    BalasHapus
  130. Berkunjung lg nigh Gan,,

    Masih setia nunggu Posting Hngatnya

    BalasHapus
  131. To WahidBlog : langsung TKP sob :)
    To MHARJIPES.COM : makasih gan sudah mau mengunggu postingan terbarunya :)

    BalasHapus
  132. dateng lagi ke tetangga sebelah cari yang anget2

    BalasHapus
  133. Aku hadir lg sob,ikutan baca2 dulu he..he..he

    BalasHapus
  134. Nah ini seperti ada yang di wisata murah :) rupanya masih menggunakan css, kirain js. :) terima kasih.. keren

    BalasHapus
  135. kuhadir lagi minus one day jelang tahun baru di Jumat Barokah :)

    BalasHapus
  136. mampir lagi ah sambil bagi2 cendolnya :)

    BalasHapus
  137. gan, kasih trik membuat halaman multi posting blog donk,, hehehehe ^^ ,, request ni gan :p

    BalasHapus
  138. sob kok komentar sobat masuk di SPAM sy??? kenapa seperti itu sob?? tapi komentar sobat sudah saya terbitkan...

    BalasHapus
  139. gpp gan. sante aja..
    dont worry be happy :)
    amin..amin..
    hehe
    selamat beraktifitas di jumat ini..
    semoga lebih baik..

    BalasHapus
  140. keren deh, transformasi css3 yg seing saya pake yg rotate, yg lain saya belum ada ide utk berkreasi :D
    makasih infonya ;)

    BalasHapus
  141. To gan tutorial : selamat datang di tempat yang anget angetnya sobat :) huahahaha
    To Suratman Adi : seilahkan di baca baca sobat :)
    To Aneh tapi nyata : hehehhee masa sih gan :) iya gan masih css yang js postingan berikutnya :)) =))

    BalasHapus
  142. To BlogS of Hariyanto : hehehe H- 1 ya sob hehehe :D makasih kedatangannya :)
    To BLOGCUNAYZ : silahkan di sebar cendolnya gan disiini hehehe
    To kupi pancoeng : halaman multi posting gimana sobat :) jelaskan sedikit tentangnya, nanti ane bisa posting requestnya kalau jelas :)

    BalasHapus
  143. To Asis Sugianto : wahhh memang aneh nih mbah goo**e.com ckckc masa kena SPAM mulu dari dulu!!!
    To Outbound Malang : hehehe mantap dah bahsa inggris huahahaha :)) makasih sobat kehadirannya
    To ladidacafe : iya tuh gan rotate sangat baik untuk kreasi hehehe :)

    BalasHapus
  144. To threex-hans.com : maaf sobat komentarnya masuk spammer! :(( baru di publish tadi. sulit sobat untuk di jelaskan cara membuatnya :)

    BalasHapus
  145. itu mungkin karena IP sobat sudah terdeteksi sebagai SPAMer sob,,,
    maka sobat sering masuk filter SPAM

    BalasHapus
  146. buset makin keren aja om blognya mantaps...
    oh ya Ada suatu perlombaan menulis dalam kontes Lomba Blog Speedy Resolusi Juara 2012 yang salah satu penilaiannya adalah tergantung banyak komentar dan Berkomentar Harus Sesuai Tulisan Yang Kita Buat...
    http://ojelhtc.blogspot.com/2011/12/resolusi-juara-2012.html
    Apakah Anda Semua Mau Berkomentar Di Blog Saya, Tolong Dibantu yah ^_^ ?

    BalasHapus
  147. To Asis Sugianto : astaga :| berita yang sangat buruk yang ane pernah dengar nih :(( kenapa IP ane kayak gitu ya
    To Aku mau gratisan : gak rumit rumit amat kok sob :)
    To HTC : makasih sobat opininya :) langsung ke TKP tuk membantu sobat ah :)

    BalasHapus
  148. nyimak gan.
    langsyng masuk kantung nih.

    BalasHapus
  149. biarpun ndg paham tpi ttp kagum

    BalasHapus
  150. To Hujangede Online : ane TKP sob untuk membantu sobat
    To misterius : hahahaha bisa saja lu gan :)) =))
    To district16 : masa sih sobat, kan sudah ada contohnya gan :)

    BalasHapus
  151. Belajar banyak CSS di sini sahabat
    Terima kasih sahabat atas sharenya ini

    BalasHapus
  152. siap,, maksih gan mantab ,,,,,

    BalasHapus
  153. keren banget blognya.. salut gan..

    BalasHapus
  154. izin coba dulu mas.. terima kasih tutornya.

    BalasHapus
  155. wah bisa nambah pengetahuan saya tentang css nie sob.

    BalasHapus
  156. Saya sudah mencari-cari situs tempat pembelajaran untuk Property Transform:matrix(n,n,n,n,n); tapi tidak ada yang menjelaskan secara detail disini. Saya berterima kasih sekali mas/mba mau berbagi ilmu disini.

    BalasHapus
  157. Terima kasih banyak atas semua infonya, salam sukses..
    http://goo.gl/A7pu3T

    BalasHapus
  158. Terima kasih banyak atas semua infonya, salam sukses..
    http://goo.gl/A7pu3T

    BalasHapus
  159. Terima kasih banyak yah gan atas semua infonya, salam sukses..
    http://goo.gl/4NLscu

    BalasHapus
  160. Makansih buat infomasinya, sangat bagus dan bermanfaat....

    BalasHapus
  161. Makansih buat infomasinya, sangat bagus dan bermanfaat....

    BalasHapus
  162. Enak sekali pagi hari baca artikel Anda, karena infonya sesuai dengan yang saya cari, makasih buat infonya....

    BalasHapus
  163. Nice gan desain artikelnya. . update terus ya informasinya
    salam sehat

    BalasHapus
  164. CSS3 Transform dapat disebut juga dengan efek perubahan yang terjadi pada elemen asli berdasarkan dari perubahan bentuk (Transformasi).

    BalasHapus
  165. Dalam pengkodean Css3 Transform ini, telah di bentuk dan di bedakan menjadi 5 macam transformasi.

    BalasHapus
  166. Terimakasih info tentang CSS3 Transform

    BalasHapus
  167. sengangat terus ngeblognya mazz..

    BalasHapus