#box div{display:inline-block;margin:5px;font-size:35px;animation:2s obrot linear infinite}#box{width:500px;height:500px;display:flex;justify-content:center;align-items:center}@keyframes obrot{0%{transform:rotateX(0)}12.5%{transform:rotateX(90deg)}25%{transform:rotateX(180deg)}37.5%{transform:rotateX(270deg)}50%{transform:rotateX(360deg)}to{transform:rotateX(360deg)}}#box div:nth-child(1){animation-delay:0s}#box div:nth-child(2){animation-delay:.1s}#box div:nth-child(3){animation-delay:.2s}#box div:nth-child(4){animation-delay:.3s}#box div:nth-child(5){animation-delay:.4s}#box div:nth-child(6){animation-delay:.5s}#box div:nth-child(7){animation-delay:.6s}.loader{perspective:600px;width:100px;height:100px}.cube{width:100%;height:100%;transform-style:preserve-3d;animation:rotate 4s linear infinite}.face{position:absolute;width:100%;height:100%;opacity:.8;border:.5px solid #fff}.face:nth-child(1){transform:rotateX(90deg) translateZ(50px)}.face:nth-child(2){transform:rotateX(-90deg) translateZ(50px)}.face:nth-child(3){transform:translateZ(50px)}.face:nth-child(4){transform:rotateY(90deg) translateZ(50px)}.face:nth-child(5){transform:rotateY(-90deg) translateZ(50px)}.face:nth-child(6){transform:rotateY(180deg) translateZ(50px)}@keyframes rotate{0%{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}*{box-sizing:border-box;margin:0;padding:0}