@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) }