.radius {
    width: 1em;
    height: 1em;
    clip: rect(0, .5em, 1em, 0);
    position: absolute;
    animation: rotate 5s linear 0s infinite;		-webkit-animation: rotate 5s linear 0s infinite;
}

.right {
    transform: rotateY(180deg);		-webkit-transform: rotateY(180deg);
    animation-direction: reverse;		-webkit-animation-direction: reverse;
    backface-visibility: visible;		-webkit-backface-visibility: visible;
}

.radius:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    border: 7px solid #15b5fe;
    border-radius: 50%;
    position: relative;
    -moz-box-sizing: border-box;
    box-shadow: 4px 4px 12px #15b5fe;
}

.radius1 {
    font-size: 240px;
}
.radius2 {
    font-size: 200px;
    margin: 20px;
    animation-delay: -500ms;
}
.radius3 {
    font-size: 160px;
    margin: 40px;
    animation-delay: -1000ms;
}
.radius4 {
    font-size: 120px;
    margin: 60px;
    animation-delay: -1500ms;
}

.radius2:before, .radius4:before {
    border-color: #444444;
    box-shadow: 4px 4px 12px black;
}

.circle {
    margin: 80px 75px 65px;
    background: #15b5fe;
    width: 80px;
    height: 80px;
    padding: 30px 0;
    position: absolute;
    border-radius: 50%;
    text-align: center;
    color: white;
    line-height: 1.1;
    font-size: 16px;
    animation: rotate2 5s linear 0s infinite;		-webkit-animation: rotate2 5s linear 0s infinite;
    box-shadow: 1px 2px 12px #15b5fe;
}

@keyframes rotate2 {
    from {
        transform: rotateY(-90deg);				-webkit-transform: rotateY(-90deg);
    }

    to {
        transform: rotateY(90deg);				-webkit-transform: rotateY(90deg);
    }
}

@keyframes rotate {
    25% {
        transform: translateZ(50px) rotateZ(45deg);				-webkit-transform: translateZ(50px) rotateZ(45deg);
    }
    75% {
        transform: translateZ(50px) rotateZ(-45deg);				-webkit-transform: translateZ(50px) rotateZ(-45deg);

    }
}