--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
apa kabar sobat semuah seperti biasa kami mau berbagi sedikit Tutorial yaitu--✽ ✽ ✽-- Cara Pasang Menu 3D CSS Transforms--✽ ✽ ✽--
--✽ ✽ ✽-- gak banyak Pidato silakan sobat lihat Demo di bawah--✽ ✽ ✽--
--✽ ✽ ✽-- Buat sobat yang mau pasang silakan Copy Css di bawah ini--✽ ✽ ✽--
Silakan Klik di bawah lalu Copy Kode Nya
<style>
#transDemo4 {width:218px;height:218px;margin:5px;border:1px #aaa solid;
padding:5px;-webkit-box-shadow: 0 1px 0px rgb(198, 235, 4) inset, 1px 3px 4px rgb(198, 235, 4);-moz-box-shadow: 0 1px 0px rgb(198,235,4)inset, 1px 3px 4px rgb(198, 235, 4);box-shadow: 0 1px 0px rgb(198, 235, 4) inset, 1px 3px 4px rgba(0,0,0,0.7);}#transDemo4 div:not(.clear){background-image:url('http://3.bp.blogspot.com/-WmBqA3JiQxo/Uecya8R722I/AAAAAAAAJEA/MjvgBzynACA/s72-c/fb+cantik+%2821%29.jpg');-webkit-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-ms-transition:all 2s ease-in-out;transition:all 2s ease-in-out;-webkit-perspective: 800px;-webkit-perspective-origin: 50% 100px;-moz-perspective: 800px;-moz-perspective-origin: 50% 100px;-ms-perspective: 800px;-ms-perspective-origin: 50% 100px;perspective: 800px;perspective-origin: 50% 100px;
width:50px;height:50px;margin:5px;padding:5px;border:1px blue solid;float:left;}#transDemo4:hover #rotateX, #transDemo4.hover_effect #rotateX {-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);}#transDemo4:hover #rotateY, #transDemo4.hover_effect #rotateY {-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);}#transDemo4:hover #rotateZ, #transDemo4.hover_effect #rotateZ{-webkit-transform:rotateZ(180deg);-moz-transform:rotateZ(180deg);-ms-transform:rotateZ(180deg);transform:rotateZ(180deg);}
</style>
#transDemo4 {width:218px;height:218px;margin:5px;border:1px #aaa solid;
padding:5px;-webkit-box-shadow: 0 1px 0px rgb(198, 235, 4) inset, 1px 3px 4px rgb(198, 235, 4);-moz-box-shadow: 0 1px 0px rgb(198,235,4)inset, 1px 3px 4px rgb(198, 235, 4);box-shadow: 0 1px 0px rgb(198, 235, 4) inset, 1px 3px 4px rgba(0,0,0,0.7);}#transDemo4 div:not(.clear){background-image:url('http://3.bp.blogspot.com/-WmBqA3JiQxo/Uecya8R722I/AAAAAAAAJEA/MjvgBzynACA/s72-c/fb+cantik+%2821%29.jpg');-webkit-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-ms-transition:all 2s ease-in-out;transition:all 2s ease-in-out;-webkit-perspective: 800px;-webkit-perspective-origin: 50% 100px;-moz-perspective: 800px;-moz-perspective-origin: 50% 100px;-ms-perspective: 800px;-ms-perspective-origin: 50% 100px;perspective: 800px;perspective-origin: 50% 100px;
width:50px;height:50px;margin:5px;padding:5px;border:1px blue solid;float:left;}#transDemo4:hover #rotateX, #transDemo4.hover_effect #rotateX {-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);}#transDemo4:hover #rotateY, #transDemo4.hover_effect #rotateY {-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);}#transDemo4:hover #rotateZ, #transDemo4.hover_effect #rotateZ{-webkit-transform:rotateZ(180deg);-moz-transform:rotateZ(180deg);-ms-transform:rotateZ(180deg);transform:rotateZ(180deg);}
</style>
--✽ ✽ ✽-- Buat Div sobat bisa pake Html yang di bawah ini--✽ ✽ ✽--
Silakan Klik di bawah lalu Copy Kode Nya
<div id="transDemo4" class="shadow hover">
<div id="rotateX"><a href='#'>Menu</a></div>
<div id="rotateY"><a href='#'>Menu</a></div>
<div id="rotateZ"><a href='#'>Menu</a></div>
<div id="rotateX"><a href='#'>Menu</a></div>
<div id="rotateY"><a href='#'>Menu</a></div>
<div id="rotateZ"><a href='#'>Menu</a></div>
<div id="rotateX"><a href='#'>Menu</a></div>
<div id="rotateY"><a href='#'>Menu</a></div>
<div id="rotateZ"><a href='#'>Menu</a></div>
</div>
<div id="rotateX"><a href='#'>Menu</a></div>
<div id="rotateY"><a href='#'>Menu</a></div>
<div id="rotateZ"><a href='#'>Menu</a></div>
<div id="rotateX"><a href='#'>Menu</a></div>
<div id="rotateY"><a href='#'>Menu</a></div>
<div id="rotateZ"><a href='#'>Menu</a></div>
<div id="rotateX"><a href='#'>Menu</a></div>
<div id="rotateY"><a href='#'>Menu</a></div>
<div id="rotateZ"><a href='#'>Menu</a></div>
</div>
Sekian dulu dari kami kali ini tentang
--✽ ✽ ✽-- Cara Pasang Menu 3D CSS Transforms--✽ ✽ ✽--
semoga berguna buat sobat yang membutuhkannya Amin...?
{ 38 comentários... read them below or Comment }
1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
Semakin hari semakin banyak ini mas tutorialnya ini menu 3d css transformsnya bisa terapkan ini pada blog baru saya yang satu lagi :)
BalasHapuswah punya blog baru y mas
Hapusgile men berputer-puter ampe puyeung +_+
BalasHapusene jamu ora!!!
ene JAMU kuat adanya bos heheh
Hapusbikin pusing aja mas hehe.., makasih *smile
BalasHapuskan ada Bodrex mas heheh
HapusGunanya untuk apa mas?
BalasHapusmasangnya dmna?
saya kagak mudeng babar blas,,,
mbok ajari saya mas,,,,,
gunanya buat ngusir Tikus mbk hahaha
Hapushahahaha.. jitu banget
Hapushahahha subuh2 masih kluyuran ae sob. lgi cari wangsit y xixixi
HapusHahaha Kasian Mbakk Maya Dijailin Ama Mas Brebes haha
Hapushmm permainan rotate
BalasHapusiya bos lagi belajar bos hheheheh
Hapuskali ini saya tidak akan berkomentar apa apa mas... soalnya saya rada kesel nih sama posrtingan atau tutorial kali ini..
BalasHapussudah saya nggak bisa lihat demonya karena pake hp.. saya juga susah pasang srcib nya...
jadi saya memutuskan untuk tidak berkomentar kali ini... mohon pengertiannya mas brebes ya..? saya tidak berkomentar bukan karna mas brebes kok.. tapi karena saya mumet gimana pasangnya kalau pake hp...
udah ah.. kan saya nggak mau berkomentar .... saya pulang dulu ya mas.... hahhaha
hahahha y dah minum kopi aja bos biar gk ngantuk wkwkwkkw
HapusHahahaha,,,,,
Hapusmas nady koment panjang gtu kok ,,,,
senasib dech kita
gambarnya bisa berputar putar.., tampak hidup jadinya.
BalasHapusiya sob walupun sedikit bingung heheh
HapusWahhh Mas Brebesnya Aja Masii Bingung apa Lagi saya ckckck :D
HapusTapi" Makasii Yah Mas Atas Infonya ^_^
Makin keren aja nih bang tutornya.
BalasHapustrmksih sobat
Hapuswaw banget hasilnya, omong2 poto sapa mas? ^_-
BalasHapustebak poto siapa coba, kalo bener ntar dapat hadiah..
Hapusiya bener tuh dapet hadia heheh..
Hapuskeren banget nih mas bisa muter-muter, kalau diakhir putaran bisa nggak mas dibikin posisinya kembali ke posisi normal, soalnya yang kiri dan kanan liatnya jadi terbalik, kasian kan orangnya :)
BalasHapushehehhe bisa mas kdi bagian transform
Hapusbagus... bagus.... sip mas :)
HapusKeren, bisa muter-muter gitu ... :D
BalasHapusiya kyk pesawat muter2 hehehe
Hapuswaw saya suka potonya, pacar nya master ya? ^_^
BalasHapusWah .. bagus banget mas ... apalagi saya suka goyang mas.. :D
BalasHapus"Goyang Dikit, Joss !" ...
mantap bin ajibbb mas.. hehe goyang transform
BalasHapushati-hati mas Andes entar goyangnya kebablasan bisa repot tuh hehe...
Hapuswah tampilan bru nya adem bnget sob
BalasHapusMantap dah Pokoknya :D
BalasHapusgilakk.,
BalasHapusmakin keren aja template nya.,
tapi warnanya kurang nyaman di mata gan :D
pening kalau di ulak alik
BalasHapusjadi kayak kegiling tp cantik
Waduh .. Keren banget Mas .... :)
BalasHapus