.wrapper {
    perspective: 800px;
    display: flex;
    justify-content: center;
    filter: blur(1.5px);
}

.container-sphere {
    transform: rotateX(40deg) rotateY(40deg) rotateZ(90deg);
    transform-style: preserve-3d;
    position: relative;
    display: flex;
    height: 300px;
    width: 300px;
    margin: 100px 0;
}

.sphere, .ring {
    position: absolute;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
}

.sphere {
    background-image: url("https://elti.com.br/wp-content/uploads/2018/01/logo-el-ti-e1516362613658.png");
    background-position: center;
    background-size: 100%;
    backface-visibility: none;
    background-repeat: no-repeat;
}

.sphere {
    animation: rotateSphere 10s linear infinite;
}
.sphere:nth-of-type(1) .ring:nth-of-type(1) {
    transform: rotateY(18deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(2) {
    transform: rotateY(36deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(3) {
    transform: rotateY(54deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(4) {
    transform: rotateY(72deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(5) {
    transform: rotateY(90deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(6) {
    transform: rotateY(108deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(7) {
    transform: rotateY(126deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(8) {
    transform: rotateY(144deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(9) {
    transform: rotateY(162deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(10) {
    transform: rotateY(180deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(1) {
    transform: rotateX(18deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(2) {
    transform: rotateX(36deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(3) {
    transform: rotateX(54deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(4) {
    transform: rotateX(72deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(5) {
    transform: rotateX(90deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(6) {
    transform: rotateX(108deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(7) {
    transform: rotateX(126deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(8) {
    transform: rotateX(144deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(9) {
    transform: rotateX(162deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(10) {
    transform: rotateX(180deg);
}

.ring {
    border: 1px dotted;
    box-sizing: border-box;
    border-radius: 50%;
    opacity: 0;
    animation: fadeIn 2000ms ease infinite;
}
.ring:nth-of-type(1) {
    border-color: #ffffff;
    animation-delay: 200ms;
}
.ring:nth-of-type(2) {
    border-color: #04AAA6;
    animation-delay: 400ms;
}
.ring:nth-of-type(3) {
    border-color: #ffffff;
    animation-delay: 600ms;
}
.ring:nth-of-type(4) {
    border-color: #04AAA6;
    animation-delay: 800ms;
}
.ring:nth-of-type(5) {
    border-color: #ffffff;
    animation-delay: 1000ms;
}
.ring:nth-of-type(6) {
    border-color: #04AAA6;
    animation-delay: 1200ms;
}
.ring:nth-of-type(7) {
    border-color: #ffffff;
    animation-delay: 1400ms;
}
.ring:nth-of-type(8) {
    border-color: #04AAA6;
    animation-delay: 1600ms;
}
.ring:nth-of-type(9) {
    border-color: #ffffff;
    animation-delay: 1800ms;
}
.ring:nth-of-type(10) {
    border-color: #04AAA6;
    animation-delay: 2000ms;
}

@keyframes rotateSphere {
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
@keyframes fadeIn {
    from, to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}