Font awesome css adresi :
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
body {
background-color:#CCCCCC;
}
ul.cerceve {
width:300px;
height:auto;
margin: 1px auto;
}
li.menuBox {
width:300px;
height:60px;
overflow:hidden;
position:relative;
display:block;
float:left;
margin:0.3%;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
li.menuBox .primaryBox {
width:300px;
height:60px;
position:relative;
display:block;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(0deg);
-moz-transform: perspective(900px) rotateX(0deg);
-ms-transform: perspective(900px) rotateX(0deg);
-o-transform: perspective(900px) rotateX(0deg);
-transform: perspective(900px) rotateX(0deg);
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
li.menuBox:hover .primaryBox {
margin-top:-60px;
-webkit-transform: perspective(900px) rotateX(90deg);
-moz-transform: perspective(900px) rotateX(90deg);
-ms-transform: perspective(900px) rotateX(90deg);
-o-transform: perspective(900px) rotateX(90deg);
-transform: perspective(900px) rotateX(90deg);
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
li.menuBox .secondaryBox {
width:300px;
height:60px;
position:relative;
display:block;
background-color:#999999;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(900px) rotateX(-90deg);
-moz-transform: perspective(900px) rotateX(-90deg);
-ms-transform: perspective(900px) rotateX(-90deg);
-o-transform: perspective(900px) rotateX(-90deg);
transform: perspective(900px) rotateX(-90deg);
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
li.menuBox:hover .secondaryBox {
background-color:#fff;
-webkit-transform: perspective(900px) rotateX(0deg);
-moz-transform: perspective(900px) rotateX(0deg);
-ms-transform: perspective(900px) rotateX(0deg);
-o-transform: perspective(900px) rotateX(0deg);
transform: perspective(900px) rotateX(0deg);
}
li.menuBox a{
text-decoration:none;
font-size:50px;
margin-left:7px;
margin-top:5px;
display:block;
float:left;
position:absolute;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
li.menuBox p{
text-decoration:none;
font-size:50px;
margin-left:50px;
margin-top:-50px;
display:block;
position:absolute;
float:right;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}<ul class="cerceve">
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-android"><p>Android</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-android"><p>Android</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-apple"><p>Apple</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-apple"><p>Apple</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-windows"><p>Windows</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-windows"><p>Winows</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-linux"><p>Linux</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-linux"><p>Linux</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-youtube"><p>Youtube</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-youtube"><p>Youtube</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-skype"><p>Skype</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-skype"><p>Skype</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-github"><p>Github</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-github"><p>Github</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-html5"><p>Html5</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-html5"><p>Html5</p></i></a></div>
</li>
<li class="menuBox">
<div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-dropbox"><p>Dropbox</p></i></a></div>
<div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-dropbox"><p>Dropbox</p></i></a></div>
</li>
</ul>
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
