CSS
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
background: #bdc3c7;
}
.cube {
font-size: 20vmin;
width: 1em;
height: 1em;
background: #e74c3c;
-webkit-transform: rotate(45deg) skew(-15deg, -15deg) translate(-0.5em, -0.5em);
transform: rotate(45deg) skew(-15deg, -15deg) translate(-0.5em, -0.5em);
position: relative;
box-shadow: 1.25em 1.25em 0 #bdc3c7;
-webkit-animation: fly 3s alternate infinite ease-in-out;
animation: fly 3s alternate infinite ease-in-out;
border: 2px solid #333;
}
.cube:before, .cube:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
box-sizing: border-box;
}
.cube:before {
-webkit-transform: skew(45deg, 0) translate(-0.5em, 1em);
transform: skew(45deg, 0) translate(-0.5em, 1em);
background: #27ae60;
border: 2px solid #333;
}
.cube:after {
-webkit-transform: skew(0, 45deg) translate(1em, -0.5em);
transform: skew(0, 45deg) translate(1em, -0.5em);
background: #1fa2c1;
border: 2px solid #333;
}
@-webkit-keyframes fly {
to {
-webkit-transform: rotate(45deg) skew(-15deg, -15deg) translate(0, 0);
transform: rotate(45deg) skew(-15deg, -15deg) translate(0, 0);
box-shadow: 1em 1em 0 #7f8c8d;
}
}
@keyframes fly {
to {
-webkit-transform: rotate(45deg) skew(-15deg, -15deg) translate(0, 0);
transform: rotate(45deg) skew(-15deg, -15deg) translate(0, 0);
box-shadow: 1em 1em 0 #7f8c8d;
}
}
