flat menu ui efek flip css3 samsury sites
TRANSCRIPT
5/6/14 Flat Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/flat-menu-ui-efek-flip-css3.html 1/6
SAMSURY SITES Tutorial Blog
FLAT MENU UI EFEK FLIP CSS3
Flat Menu UI Efek Flip CSS3 - Dengan semakin maraknya para pengguna design UI ( User Interface ) baik Flat UI,
Semantic UI, maupun Fitur Bootstrap framework ke dalam template blogger. Kali ini saya persembahkan lagi contoh Flat
Menu Ui dengan efek flip menggunakan transform CSS3, dan tentunya masih dikombinasikan dengan font icon
awesome seperti artikel sebelumnya Kombinasi Menu Metro Ui dengan Font Awesome dan Drop Down Menu
Metro UI Awesome .
Silakan lihat demonya dibawah ini :
DEMO
VIEW CODE
CSS
HOME AWESOME CSS3 FLAT UI MENU UI METRO UI STYLE Flat Menu UI Efek Flip CSS3
5/6/14 Flat Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/flat-menu-ui-efek-flip-css3.html 2/6
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
nav ul {
min-width: 600px;
position: relative;
display: table;
margin: 50px auto;
clear: both;
}
nav ul li {
list-style: none;
float: left;
}
nav ul li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
nav ul li .front {
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
nav ul li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}
nav ul li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
HTML
<nav>
<ul class="panel">
<li class="color-1"> <a href="#">
<div class="front">
<i class="fa fa-windows fa-4x"></i>
</div>
<div class="back">
<span>HOME</span>
</div>
</a>
seterusnya.......
</li>
</ul>
</nav>
Silakan anda kreasikan sendiri sesuai kebutuhan agar tampilan lebih maksimal, dan untuk HTML kode
selengkapnya bisa dilihat di View Code ...!!!
Enjoy Blogging
Newer PostOlder Post
5/6/14 Flat Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/flat-menu-ui-efek-flip-css3.html 3/6
20 COMMENT
REPLY langsung diborong pertamax mas
REPLY borong kok cuma atu mbak
REPLY keren bisa flip gitu ya
mantab deh
REPLY bolak balik ya mas
REPLY pengen ganti template..tapi gak duwe kompi aku saiki..nasiiib
REPLY lha di gadekke piye laptope kang...hehehe
REPLY hehe... tapi tetep eksis. ya mas Rif
COMMENT
5/02/2014Novita Hany
5/02/2014Virlyz Nyzam
ADMIN
5/02/2014TRI CAHYO
5/03/2014Virlyz Nyzam
ADMIN
5/03/2014Tiyang Magelang
5/03/2014Nyzam V
5/03/2014Purnomo Jr
5/6/14 Flat Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/flat-menu-ui-efek-flip-css3.html 4/6
REPLY Yoi Mas Bud...pake tab pun juga bisa eksis
REPLY kreasi mas Virl emang udah ndak di raguin lagi deh
#wes top mas
REPLY Ah mas budi nih paling bisa banget deh...
REPLY Assallammualaikum Kang...lama ga ngesot kemari apa kabarnya nih kang sipp artikelnya nih..hahhahyyy
REPLY Wa'alaikum salam wr.wb Amang Icah...lawas jua kada katamuan nih, kayapa wayah nih habar banua
REPLY dipelari dulu kodenya mas,hehe masih banyak belajar nih
REPLY sipps mas bro
REPLY waah..laptope wes tak wariske adine kang..apees
5/03/2014Nyzam V
5/03/2014Purnomo Jr
5/04/2014Virlyz Nyzam
ADMIN
5/04/2014Icah Banjarmasin
5/04/2014Virlyz Nyzam
ADMIN
5/04/2014MAz Mawan
5/05/2014Virlyz Nyzam
ADMIN
5/05/2014Tiyang Magelang
5/6/14 Flat Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/flat-menu-ui-efek-flip-css3.html 5/6
REPLY Yo ga po2 lah...sing penting happy wae Kang walaupun pakai mobile inet
REPLY luar biasa mas menu nya, jadi pengen coba juga nih pakai flat menu ini
REPLY silakan di otak atik lagi mbak
REPLY Kreasi yang sangat keren sekali mas
liat kreasi2nya saja hehe
REPLY hehehe
Sign out
Notify me
Enter your comment...
Comment as: Virlyz Nyzam (Google)
Publish
Preview
BY SAMSURY SITES | TEMPLATEISM
5/05/2014Virlyz Nyzam
ADMIN
5/05/2014Wahyu Eka Prasetiyarini
5/05/2014Virlyz Nyzam
ADMIN
5/05/2014Firman Ardyansyah
5/05/2014Virlyz Nyzam
ADMIN
5/6/14 Flat Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/flat-menu-ui-efek-flip-css3.html 6/6