Web dan Grafis Desain
Author
Sharing is Beautiful.
Kp. Bumi Godean RT.01 RW.06
Wonosobo , Jawa Tengah
56311
Indonesia
alfirous@yahoo.com
081215880929
DOB: 09/03/----
Maaf web sedang dalam perbaikan setelah vakum dalam waktu yang lama.

Membuat CSS3 Transform



CSS3 Transform - Bisa kita gunakan untuk memutar Objek pada sudut tertentu dengan Transform Rotate , memperbesar Objek dengan Transform Scale atau juga membuat miring Objek dengan Transform Skew. Langsung saja kita praktekkan agar lebih jelas.


-moz-transform: rotate(4deg) ;
-webkit-transform:  
rotate(4deg)  ;
-o-transform: rotate(4deg
) ;
-ms-transform: rotate(4deg
);
transform:rotate(4deg
);
Contoh CSS3 Rotate

Keterangan : 4deg menunjukkan besar nilai jika ingin memutar kearah kiri gunakan nilai negatif seperti ini -4deg.

Contoh CSS3 Rotate




-moz-transform: scale(2) ;
-webkit-transform: scale(2) ;
-o-transform: scale(2) ;
-ms-transform: scale(2) ;
transform: scale(2) ;
Contoh CSS3 Scale
Keterangan : 2 semakin besar nilainya maka akan semakin besar perbesarannya , efek ini biasanya terlihat jika menggunakan Hover.

-moz-transform:skew(6deg, 6deg);
-webkit-transform:skew(6deg, 6deg);
-o-transform:skew(6deg, 6deg);
-ms-transform:skew(6deg, 6deg);
transform:skew(6deg, 6deg);
Contoh CSS3 Skew
Keterangan : Semakin besar nilai deg maka akan semakin besar kemiringannya . Berbeda dengan Rotate , Skew hanya membuat miring suatu Objek sedangkan Rotate memutar Objek.
"Jika masih bingung silahkan tinggalkan Komentar , Semoga bermanfaat"

88 komentar :

  1. wawww... mantepp benerr master qopeett .. :D

    BalasHapus
    Balasan
    1. KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

      KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل


      KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل



      KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

      KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل


      KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل


      Hapus
  2. yaelahhhhhhh!!!!!
    sedikit saran, itu CSS3 transform yang scale tidak terlalu kelihatan sob :) akan lebih baik jika sebelum scale-nya dan sesudahnya.

    BalasHapus
  3. asemmm dah gagal PERTAMAX :(( :(( btw, itu yg kyk di header blog ente ya mbah..? yg miring2 itu =)) =))

    BalasHapus
  4. Pena hadir dan absen malam.....wah pada telat tuh pertamaxnya..yang penting absen dan hadirnya hehehe

    BalasHapus
  5. kang kopeettt benerr 2 mastah CSS3 ne, perlu banyk belajar...

    BalasHapus
  6. mumet aku nek ora di belajari secara langsung....

    BalasHapus
  7. setuju ma yang diatas..perlu ada pembuatan efek mas atau mungkin halaman demo supaya efeknya kelihatan jelas..

    selebihnya mantap deh:D

    BalasHapus
  8. wah kalo pakek mobile gag nampak nih geraknya mbah?

    BalasHapus
  9. tapi kalo naruh efeknya ga pas, desain jadi jelek :)

    BalasHapus
  10. Sipp dach,makin mantep aja nih tutor cssnya :D

    BalasHapus
  11. keren..
    tapi ane masih bingung... hehehe

    BalasHapus
  12. Owh..begitu cara buatnya..terima kasih atas infonya mbah.. :)

    BalasHapus
  13. wahhh gak ada yg dibales sama mbah =)) =)), ohiya request ente udah ane post tuh,, :P :P

    BalasHapus
  14. CSS3 Transform Scale kagak bisa d chrome

    BalasHapus
  15. ow efek hover perbesaran y? "wkwkwk"
    makasi sob, ane baru tahu :D

    BalasHapus
  16. @Setya Dwi : thanks mas :)
    @Rama88 : mimpi ya Mas :p ? iya
    @Farixsantips : mimpi juga ente ? nanti ane perbaiki terburu" tadi malem :)
    @tautanpena : silahkan , gpp yg penting hadir :)
    @Zaenal : makasih , ayo belajar bersama
    @Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia : silahkan
    @Baha Andes : pelajari langsung aja biar ga pusing :)

    BalasHapus
  17. @Bayu aldi yansyah : ga ada yg gerak kok :/ ?
    @willy alam : jauh bener sob ?
    @John Terro : iya betul , jelek ya desain ane ?
    @Musa Khairul Umam : makasih :)
    @Setia Ji : belajar lagi biar ga bingung :D
    Tips Kesehatan | Tips Kecantikan : sama-sama
    @Rama88 : gimana mau bales , habis Post langsung Off
    @Cek Info : bisa kok

    BalasHapus
  18. jadi kangen nih mas ngutak ngatik code css lagi, sejak aq ganti mesin

    BalasHapus
  19. kren post'ny gan
    wew blognya makin kren aja nih si mbah

    BalasHapus
  20. Pemulung Kecil yang Meninspirasiku : silahkan
    @Cek Info : iya :p , masama
    @Rizkyzone.com : kenapa ga balik lagi aja ke Blogger ? WP juga bisa kok mas CSS :)
    Tituitbom.Com - News and Tips Tricks : makasih , sama-sama

    BalasHapus
  21. kren nih triknya gan
    blognya juga kren abis apalagi sekarang pake efek di setiap posting background'ny beda2
    Mbah Qopet emang cool

    BalasHapus
  22. Ini caranya gimana ya sob / ditaruh dimana ?
    Jujur saya masih bingung CSS3.

    Boleh diterangkan sob / situs mana yang ada pembelajaran CSS3 ini ?

    BalasHapus
  23. Admin - Ari Software : memang :)

    BalasHapus
  24. Wah, keren banget bro.. terus share ya ilmu designnya :)

    BalasHapus
  25. coba ente akses di URL ini

    http://mbahqopet.blogspot.com/2011/11/membuat-css3-transform.html?m=1

    ane kagag liat geraknya mbah . .:/

    BalasHapus
  26. wiii... mantaaav dha' ....
    kalo soal design css, saya angakt kaki dha' ... masih perlu belajar sama mbah nih ....

    btw ini efeknya support semua browser yaCh bro ... ??? :)

    BalasHapus
  27. http://tentangduniadanweb.blogspot.com/2011/11/cara-membuat-gambar-dapat-digeser-di.html

    BalasHapus
  28. keren, cocok untuk bikin simple clean templates nih

    BalasHapus
  29. @Pradisz Wardhana : makasih , ok insya allah :)

    @Zh!nTho : ok mas :)

    @bayu aldi yansyah : emang ane ga kasih efek gerak kok :D

    @Shinobi Caemk : jangan angkat kaki dari sini tapi , iya :)

    @4JIE BLOG : silahkan di coba :)

    @Syndicate OS : makasih , silahkan

    BalasHapus
  30. Kalau bisa gerak naik turun itu juga Css3 transform ya Mbah?

    BalasHapus
  31. gilaa, ilmu nya ajib bener.

    ahli bener main kode ~

    saya udah coba coba tapi blom berhasil ~ :(

    BalasHapus
  32. nice post sobat...

    yg paham makin paham yg blm paham juga akan menuju ketahap pemahaman...

    kunjungan perdana dr saya buat sobat.

    http://luswandy-ngeblog.blogspot.com/

    BalasHapus
  33. seeepppp..
    tapi masih gak paham .. :D
    nice blog.. nice articles

    BalasHapus
  34. wah gimana makeknya sih mbah...
    maklum ndak biasa coding

    BalasHapus
  35. @Wirang geni : bisa , pake Translate + Hover

    @Abda Faisal : belajar terus biar berhasil :)

    @NGEBLOG™ : semoga saja sobat , sudah saya kunjungi Blog sobat tadi :)

    @Musa Khairul Umam : ya silahkan :D

    @gang tutorial : makasih.

    @awan : makasih , pelajari dulu aja :)

    @Wahyu : taruh di dalam kode CSS.

    @komunitas blogger madura : silahkan.

    BalasHapus
  36. yaa udah, angkat jemuran aja dhe kalo gitu ... :D

    BalasHapus
  37. terburu buru ngapain kayak di kejar setan aja keburu buru pas malem huahahaha

    BalasHapus
  38. tab view ente kenapa tuh mbah..? :o kok link blog orang ..? =)) =))

    BalasHapus
  39. Numpang Promo Gan.. Beri Dukungan Klik Disini

    BalasHapus
  40. gimana bah riques saya udah ditemukan blom

    BalasHapus
  41. tukar link yuk sob????

    http://solution-u.blogspot.com/2011/11/google-bolakeren-gak-ya.html

    BalasHapus
  42. Mbah ane dah praktekin
    tapi kog kayak gini yagh
    ke sini

    BalasHapus
  43. kunjungan kemari lagi nih sob ikut meramaikan sambil nongkrong di trotoar blog jiakaka

    BalasHapus
  44. salam sahabat
    udah jarang oprek kode css apalagi yang versi css3,makasih oh iya dah saya folow

    BalasHapus
  45. CSS 3 ya?.dapat belajar dari mana sob?

    BalasHapus
  46. lama gk kemari makin keren ajah neh blog :D

    BalasHapus
  47. wah keren neh infonya
    kunjjungi balik yaa
    http://it-softcenter.blogspot.com/

    BalasHapus
  48. wah teknik yang bagus sob, mbah memang jago kl masalah CSS. Dan selalu baik hati untuk berbagi ilmunya. Terimakasih banyak sob

    BalasHapus
  49. kunjungan balik lagi ah niat duduk bersandar

    BalasHapus
  50. Nungguin log Mbah Qupet malem2 :D
    Sapa tahu ke jatuhan yg baru Wkkkkk....

    BalasHapus
  51. Wihiii..keren ya :D
    Saya sih nyerah kalo mainin css3, gak ada bakat :))
    Mantep nih tutornya :)

    BalasHapus
  52. wah, sipp nih utk bikin blog makin cantik, ehehee . ..

    keren deh pokoknya css3 ;)

    BalasHapus
  53. haduh,,baru berkunjung kesini lagi..gimana kabar? kayak dah lama banget jarang ngobrol....
    Sip semakin di depan nih :)

    BalasHapus
  54. ta nongkrong dlu aah disini ...
    sekalian pesen kopi susu mbah ... :D

    BalasHapus
  55. ini seperti yang ente pake pada widget 10 blog deal y

    BalasHapus
  56. hahaha ikut nyengir deh ane gag ngerti :D

    BalasHapus
  57. tutorial yang menarik untuk memperindah tampilan blog :)
    terimakasih kawan sudah berbagi ilmu

    BalasHapus
  58. pagi=pagi dah daoat tambahan ilmu
    thank's ya dah mau share

    BalasHapus
  59. tutorialnya bagus mas bermanfaat, btw blognya keren sekali

    BalasHapus
  60. Cara menghargai diri sendiri :
    http://fadhlyashary.blogspot.com/2011/11/8-cara-menghargai-diri-sendiri.html

    BalasHapus
  61. wah lengkap nih kode transform CSS nya sobat...

    BalasHapus
  62. pengen nanya nih mbah,cara memberi teks pada CSS3 transformnya gimana?

    BalasHapus
  63. @All : thanks untuk kunjungan dan visitnya.

    @Aris Sugianto : ini masih belum seberapa sob.

    @Trisna N : tinggal masukkan kodenya.

    BalasHapus
  64. Ini mengunakan div yach mbah dalam postingan...

    BalasHapus
  65. Terimakasih banyak atas informasinya..!
    salam kenal dan semoga sukses...

    BalasHapus
  66. keren ni, ntar bisa aku praktekkan

    BalasHapus

Anda dapat berkomentar terkait artikel diatas dan isi komentar sepenuhnya menjadi tanggung jawab komentator.

Dilarang berkomentar dengan tidak sopan, kasar, berisi fitnah, berbau SARA, SPAM dan OOT. Setiap komentar yang masuk akan dimoderasi dan akan diterbitkan jika sesuai dengan ketentuan yang berlaku.