html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    align-items: center;
    text-align: center;
    display: flex;
    background: #000000;
    /* perspective needed for 3D transforms to look correct */
    perspective: 1000px;
}

h1 {
    margin: 0 auto;
    color: rgb(0, 255, 0);
    font-family: 'Courier New', Courier, monospace;
    font-size: 48px;
    transform-style: preserve-3d;
    animation: spin-3d 5s infinite linear;
}

@keyframes spin-3d {
    0% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
            text-shadow:
        1px 1px 0px #0000ff,
        2px 2px 0px #ff0000,
        3px 3px 0px #00ff00,
        4px 4px 0px #ff00ff,
        5px 5px 0px #ffffff,
        -1px -1px 0px #0000ff,
        -2px -2px 0px #ff0000,
        -3px -3px 0px #00ff00,
        -4px -4px 0px #ff00ff,
        -5px -5px 0px #ffffff,
        0px 0px 1000px #00ff00;
    }

    50% {
        transform: rotateY(180deg) scale(0);
        opacity: 0;
            text-shadow:
        1px 1px 0px #0000ff,
        2px 2px 0px #ff0000,
        3px 3px 0px #00ff00,
        4px 4px 0px #ff00ff,
        5px 5px 0px #ffffff,
        -1px -1px 0px #0000ff,
        -2px -2px 0px #ff0000,
        -3px -3px 0px #00ff00,
        -4px -4px 0px #ff00ff,
        -5px -5px 0px #ffffff,
        0px 0px 10px #00ff00;
    }

    100% {
        transform: rotateY(360deg) scale(1);
        opacity: 1;
                    text-shadow:
        1px 1px 0px #0000ff,
        2px 2px 0px #ff0000,
        3px 3px 0px #00ff00,
        4px 4px 0px #ff00ff,
        5px 5px 0px #ffffff,
        -1px -1px 0px #0000ff,
        -2px -2px 0px #ff0000,
        -3px -3px 0px #00ff00,
        -4px -4px 0px #ff00ff,
        -5px -5px 0px #ffffff,
        0px 0px 1000px #00ff00;
    }
}