<h2>Dont forget to check :active</h2>
<h2>Dont forget to check :active</h2>
<ul class="metro">
<li><i class="fa fa-gamepad"></i><span>Games</span></li>
<li><i class="fa fa-cogs"></i><span>Settings</span></li>
<li><i class="fa fa-envelope-o"></i><span>Email</span></li>
<li><i class="fa fa-comments-o"></i><span>Messages</span></li>
<li><i class="fa fa-music"></i><span>Music</span></li>
<li><i class="fa fa-heart-o"></i><span>Favorites</span></li>
<li><i class="fa fa-picture-o"></i><span>Photos</span></li>
<li><i class="fa fa-picture-o"></i><span>bla</span></li>
</ul>
<div class="box">
<span class="close"></span>
<p></p>
</div>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
body {
background: #363B48;
font-family: Montserrat;
overflow:hidden;
touch-callout: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
}
h2 {
margin:150px auto 50px;
text-align:center;
font-size:18px;
text-transform:uppercase;
background:#2e333f;
padding:25px;
display:block;
cursor:default;
width:370px;
color:#cacaca;
border:1px solid rgba(173, 173, 173, 0.15);
}
.metro {
width: 630px;
margin: 0 auto 0;
}
.metro li {
transform: perspective(600px);
transform-style: preserve-3d;
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(600px);
transform-style: preserve-3d;
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(600px);
transform-style: preserve-3d;
transform-origin-x: 50%;
transform-origin-y: 50%;
cursor: default;
position: relative;
text-align: center;
margin: 0 10px 10px 0;
width: 150px;
height: 150px;
color: #ffffff;
float: left;
transition: .2s transform, 1s opacity;
transition: .2s transform, 1s opacity;
transition: .2s transform, 1s opacity;
cursor:pointer;
}
.metro li i {
font-size: 54px;
margin: 35px 0 0;
}
.metro li span {
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
position: absolute;
left: 15px;
bottom: 15px;
font-size: 14px;
}
.metro li:first-child {
background: #00b6de;
}
.metro li:nth-child(2) {
background: #56dea7;
width: 310px;
}
.metro li:nth-child(3) {
background: #ff7659;
margin: 0;
}
.metro li:nth-child(4) {
background: #f8cd36;
}
.metro li:nth-child(5) {
background: #f26175;
}
.metro li:nth-child(6) {
background: #5ca7df;
}
.metro li:last-child {
background: #9e7ac2;
margin: 0;
}
.metro li:nth-child(5):active, .metro li:first-child:active {
transform: scale(0.95);
transform: scale(0.95);
transform: scale(0.95);
}
.metro li:nth-child(7):active, .metro li:nth-child(2):active {
transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
}
.metro li:nth-child(3):active {
transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
}
.metro li:nth-child(4):active {
transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
}
.metro li:nth-child(6):active {
transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
}
/* POPUP */
.box {
display: table;
top: 0;
visibility: hidden;
transform: perspective(1200px) rotateY(180deg) scale(0.1);
transform: perspective(1200px) rotateY(180deg) scale(0.1);
transform: perspective(1200px) rotateY(180deg) scale(0.1);
top: 0;
left: 0;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: 1s all;
}
.box p {
display: table-cell;
vertical-align: middle;
font-size: 64px;
color: #ffffff;
text-align: center;
margin: 0;
opacity: 0;
transition: .2s;
transition-delay: 0.2s;
transition-delay: 0.2s;
transition-delay: 0.2s;
}
.box p i {
font-size: 128px;
margin:0 0 20px;
display:block;
}
.box .close {
display:block;
cursor:pointer;
border:3px solid rgba(255, 255, 255, 1);
border-radius:50%;
position:absolute;
top:50px;
right:50px;
width:50px;
height:50px;
transform:rotate(45deg);
transform:rotate(45deg)
transform:rotate(45deg);
transition: .2s;
transition-delay: 0.2s;
transition-delay: 0.2s;
transition-delay: 0.2s;
opacity:0;
}
.box .close:active {
top:51px;
}
.box .close::before {
content: "";
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 1);
width: 80%;
height: 6%;
left: 10%;
top: 47%;
}
.box .close::after {
content: "";
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 1);
width: 6%;
height: 80%;
left: 47%;
top: 10%;
}
.box.open {
left: 0;
top: 0;
visibility: visible;
opacity: 1;
z-index: 999;
transform: perspective(1200px) rotateY(0deg) scale(1);
transform: perspective(1200px) rotateY(0deg) scale(1);
transform: perspective(1200px) rotateY(0deg) scale(1);
width: 100%;
height: 100%;
}
.box.open .close, .box.open p {
opacity: 1;
}
$(document).ready(function() {
$(document).ready(function() {
var $box = $('.box');
$('.metro li').each(function(){
var color = $(this).css('backgroundColor');
var content = $(this).html();
$(this).click(function() {
$box.css('backgroundColor', color);
$box.addClass('open');
$box.find('p').html(content);
});
$('.close').click(function() {
$box.removeClass('open');
$box.css('backgroundColor', 'transparent');
});
});
});