@keyframes move {
0% {
transform:rotateY(0deg) rotateX(0deg)
}
100% {
transform:rotateY(360deg) rotateX(360deg)
}
}body {
background-color:rgba(0,0,0,.8);
}
div {
width:171px;
height:171px;
}
.shape {
transform-style:preserve-3d;
will-change:transform;
translateY(30deg);
margin:0 auto;
margin-top:100px;
animation:move 120s linear infinite;
}
.circle {
border:1px solid red;
position:absolute;
transform-origin:50% 50% 0;
background-color:rgba(221,0,49,0.8);
box-shadow:rgba(221,0,49,0.8) 0 0 150px;
}
.top {
transform:translateY(85px) rotateX(90deg);
}
.bottom {
transform:translateY(-85px) rotateX(90deg);
}
.left {
transform:translateX(-85px) rotateY(90deg);
}
.right {
transform:translateX(85px) rotateY(90deg);
}
.inside {
transform:translateZ(85px)
}
.outside {
transform:translateZ(-85px)
}