HTML
<ol class="box">
<li class="surface front"></li>
<li class="surface back"></li>
<li class="surface left"></li>
<li class="surface right"></li>
<li class="surface top"></li>
<li class="surface bottom"></li>
</ol>
SCSS
$size: 200px;
html {
width: 100%; height: 100%;
}
body {
position: relative;
width: 100%; height: 100%;
color: #9cd1f6;
background: #0b161c;
}
.box {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: $size; height: $size;
transform-style: preserve-3d;
animation: swing 5s ease-in-out infinite alternate;
}
.surface {
position: absolute;
border: solid 2px;
width: $size; height: $size;
font: 20px "HelveticaNeue-UltraLight";
text-align: center;
line-height: $size;
cursor: pointer;
transition: all .2s ease-in-out;
text-shadow: 0 0 10px #86ceee;
box-shadow: 0 0 10px #86ceee;
&.front {
transform: translateZ(-$size / 2);
}
&.back {
transform: rotateY(180deg) translateZ(-$size / 2);
}
&.left {
transform: rotateY(90deg) translateZ(-$size / 2);
}
&.right {
transform: rotateY(-90deg) translateZ(-$size / 2);
}
&.top {
transform: rotateX(-90deg) translateZ(-$size / 2);
}
&.bottom {
transform: rotateX(90deg) rotateY(180deg) translateZ($size / 2);
}
}
@keyframes swing {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1);
}
5% {
transform: rotateX(5deg) rotateY(5deg) rotateZ(5deg);
}
10% {
transform: rotateX(15deg) rotateY(-5deg);
}
50% {
transform: rotateX(5deg) rotateY(95deg) rotateZ(185deg);
}
90% {
transform: rotateX(-15deg) rotateY(185deg);
}
95% {
transform: rotateX(-5deg) rotateY(175deg) rotateZ(365deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg) rotateZ(360deg);
}
}