CSS
*,html {
height: 100%;
}
body {
background: linear-gradient(#000,#000d19);
margin: 0;
}
figure {
width: 150px;
height: 150px;
transform-style: preserve-3d;
position: absolute;
top: 40%;
left: 50%;
}
.face {
width: 100%;
height: 100%;
position: absolute;
border: 3px solid #e73977;
animation: pulse 1s linear infinite;
box-sizing: border-box;
}
.front {
transform: translate3d(0,0,75px);
}
.back {
transform: rotateY(180deg) translate3d(0,0,75px);
}
.left {
transform: rotateY(-90deg) translate3d(0,0,75px);
}
.right {
transform: rotateY(90deg) translate3d(0,0,75px);
}
.top {
transform: rotateX(90deg) translate3d(0,0,75px);
}
.bottom {
transform: rotateX(-90deg) translate3d(0,0,75px);
}
figure:nth-child(1) {
margin-top: 0;
margin-left: -75px;
transform: rotateX(35deg) rotateY(45deg);
}
figure:nth-child(2) {
transform: rotateX(35deg) rotateY(45deg) translate3d(-12px,-88px,0);
}
figure:nth-child(3) {
transform: rotateX(35deg) rotateY(45deg) translate3d(-312px,60px,0);
}
@keyframes pulse {
0% { border: 3px solid #e73977; }
50% { border: 3px solid #2a395b; }
}
