.geo_a, .geo_b, .geo_c {
    position: absolute;
    border: 2px solid #aaa;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

/*
.geo_a { animation: 6s infinite rotate_y; }
.geo_b { animation: 8s infinite rotate_xy; }
.geo_c { animation: 10s infinite rotate_x-y; }
*/

.geo_a {
    animation-name: rotate_y;
    animation-fill-mode: forwards;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: normal;
}

.geo_b {
    animation-name: rotate_xy;
    animation-fill-mode: forwards;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: normal;
}

.geo_c {
    animation-name: rotate_x-y;
    animation-fill-mode: forwards;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: normal;
}

@keyframes rotate_y{
    0%{ transform: rotateY(0deg); }
    100%{ transform: rotateY(360deg); }
}

@keyframes rotate_xy{
    0%{ transform: rotate3d(1,1,0,90deg); }
    25%{ transform: rotate3d(1,1,0,180deg); }
    75%{ transform: rotate3d(1,1,0,360deg); }
    100%{ transform: rotate3d(1,1,0,450deg); }
}

@keyframes rotate_x-y{
    0%{ transform: rotate3d(1,-1,0,0deg); }
    100%{ transform: rotate3d(1,-1,0,360deg); }
}