HTML
<div class='container'>
<div class='box'>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
</div>
<div class='box'>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
</div>
</div>
SCSS
$animation-duration: 2.5s;
html,body {
height: 100%;
}
body {
font-size: 200px;
background: #00c6ff;
background: linear-gradient(to left, #00c6ff , #0072ff);
overflow: hidden;
perspective: 3em;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: container $animation-duration (-$animation-duration) linear infinite;
}
@keyframes container {
from { transform: scale3d(1,1,1) rotateX(-10deg) rotateY(0deg); }
to { transform: scale3d(.5,.5,.5) rotateX(-10deg) rotateY(90deg); }
}
.box {
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin: -.5em 0 0 -.5em;
transform-style: preserve-3d;
}
@keyframes box {
from { transform: scale3d(.5,.5,.5); }
27% { transform: scale3d(2,.5,.5); }
54% { transform: scale3d(2,2,.5); }
81%, to { transform: scale3d(2,2,2); }
}
.box:nth-child(2) {
animation: box $animation-duration (-$animation-duration) cubic-bezier(.2,0,.5,1) infinite;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
box-sizing: border-box;
border: 2px solid #ecf0f1;
}
.face:nth-child(1) {
transform: translateZ(.5em);
}
.face:nth-child(2) {
transform: rotateY(90deg) translateZ(.5em);
}
.face:nth-child(3) {
transform: rotateX(90deg) translateZ(.5em);
}
.face:nth-child(4) {
transform: rotateY(-90deg) translateZ(.5em);
}
.face:nth-child(5) {
transform: rotateX(-90deg) translateZ(.5em);
}
.face:nth-child(6) {
transform: rotateY(180deg) translateZ(.5em);
}
