How to do Metro UI Animations with HTML/CSS & JS

After the arrival of Windows 8 metro style design became really popular and you can see lots of ways to do Metro style design. Believe it or not the design has changed enormously for the last year and half. Metro style will be adopted more in more in different design projects such as apps & websites. That’s is because of it’s simplicity and eye-catchy and bright look. It seems that the icons will keep being simplified, flat colours will stay and be used more and more. Metro UI style aims to be more user-friendly and simple and probably that is the reason designers started to use it. In this example below you will see how to do a Metro UI animations with some HTML/CSS and Javascript.  The icons used are from Font Awesome but you can use other ones such as Glyph icons, Ionicons or Icomoon. Have a look at Glyphsearch if you want.

This animations are developed by Marius Balaj on Codepen. Have a look at the code below if you want to create such Metro UI Animations.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

Metro UI Animations



<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>


<div class="box">
<span class="close"></span>



@import url(,700);
@import "";

body {
background: #363B48;
font-family: Montserrat;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

h2 {
margin:150px auto 50px;
border:1px solid rgba(173, 173, 173, 0.15);

.metro {
width: 630px;
margin: 0 auto 0;
.metro li {
-webkit-transform: perspective(600px);
-webkit-transform-style: preserve-3d;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
-ms-transform: perspective(600px);
-ms-transform-style: preserve-3d;
-ms-transform-origin-x: 50%;
-ms-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;
-webkit-transition: .2s -webkit-transform, 1s opacity;
-ms-transition: .2s -ms-transform, 1s opacity;
transition: .2s transform, 1s opacity;

.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 {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);

.metro li:nth-child(7):active, .metro li:nth-child(2):active {
-webkit-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
-ms-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
transform: perspective(600px) rotate3d(1, 0, 0, -10deg);

.metro li:nth-child(3):active {
-webkit-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
-ms-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
transform: perspective(600px) rotate3d(0, 1, 0, 10deg);

.metro li:nth-child(4):active {
-webkit-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
-ms-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
transform: perspective(600px) rotate3d(0, 1, 0, -10deg);

.metro li:nth-child(6):active {
-webkit-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
-ms-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
transform: perspective(600px) rotate3d(1, 0, 0, 10deg);

/* POPUP */

.box {
display: table;
top: 0;
visibility: hidden;
-webkit-transform: perspective(1200px) rotateY(180deg) scale(0.1);
-ms-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;
-webkit-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;

.box p i {
font-size: 128px;
margin:0 0 20px;

.box .close {
border:3px solid rgba(255, 255, 255, 1);
transition: .2s;
-webkit-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;

.box .close:active {

.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%;
} {
left: 0;
top: 0;
visibility: visible;
opacity: 1;
z-index: 999;
-webkit-transform: perspective(1200px) rotateY(0deg) scale(1);
-ms-transform: perspective(1200px) rotateY(0deg) scale(1);
transform: perspective(1200px) rotateY(0deg) scale(1);
width: 100%;
height: 100%;
} .close, p {
opacity: 1;


$(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);

$('.close').click(function() {
$box.css('backgroundColor', 'transparent');



Make sure you visit Marius Balaj on Codepen and show your appreciation for his efforts.

Related post:  Tutorial of the day: 3D Gold Typography in Photoshop
Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.