#ship1,
#ship2 {
    display: block;
    position: absolute;
    left: calc(50% + 100px);
    top: calc(50% - 100px);
}

#ship1 {
    animation: rotate1 10s linear infinite;
}

#ship2 {
    animation: rotate2 10s linear infinite;
}



@keyframes rotate1 {
    /* don't change front/back during rotation */
    from {
        transform: rotate(0deg) translateX(120px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(120px) rotate(-360deg);
    }
}

@keyframes rotate2 {
    /* face the fly direction */
    from {
        transform: rotate(0deg) translateX(-120px);
    }
    to {
        transform: rotate(360deg) translateX(-120px);
    }
}

.explain {
    position: absolute;
    bottom: 0;
    left: 0;
}

.explain .ship {
    margin-top: 70px;
    padding-top: 10px;
    margin-bottom: 40px;
}

.explain .ship:not(:first-child) {
    border-top: 1px solid #20b2aa;
}

#ship3 .image,
#ship4 .image,
#ship5 .image {
    transition: transform 2s linear;
    cursor: pointer;
}

#ship3:hover .image {
    transform: rotate(90deg) translateX(50px);
}

.text {
    display: block;
    font-size: 1em;
    border: none;
}

#ship4 {
    right: 100px;
    bottom: 50px;
}

#ship4:hover .image {
    transform: rotate(90deg) translateX(50px) rotate(-90deg);
}

#ship5:hover .image {
    transform: translateX(50px) rotate(90deg);
}