.illusion-number {
    position: relative;
    /* 2^(-1/2) = 0.70710678118655 */
    padding: 0 0.70711em;
    width: 3em;
    height: 5em;
    overflow: hidden;
    background-color: #000000;
    /* DEBUG */
    /* perspective: 500px; */ }
    .illusion-number .illusion-number-tiles {
        position: absolute;
        width: 3em;
        height: 5em;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
                transform-style: preserve-3d; }
        .illusion-number .illusion-number-tiles div {
            position: absolute;
            -webkit-backface-visibility: hidden;
               -moz-backface-visibility: hidden;
                    backface-visibility: hidden;
            /* fix gap between tiles*/
            width: 1.05em;
            height: 1.05em;
            margin: 0;
            padding: 0;
            -webkit-animation-duration: 1s;
               -moz-animation-duration: 1s;
                    animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
               -moz-animation-iteration-count: 1;
                    animation-iteration-count: 1;
            -webkit-animation-fill-mode: forwards;
               -moz-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
            -webkit-animation-timing-function: ease;
               -moz-animation-timing-function: ease;
                    animation-timing-function: ease; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-x-0 {
            top: 0em; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-x-1 {
            top: 1em; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-x-2 {
            top: 2em; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-x-3 {
            top: 3em; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-x-4 {
            top: 4em; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-y-0 {
            left: 0em;
            -webkit-transform-origin: 1.5em 0 0;
               -moz-transform-origin: 1.5em 0 0;
                    transform-origin: 1.5em 0 0; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-y-1 {
            left: 1em;
            -webkit-transform-origin: 0.5em 0 0;
               -moz-transform-origin: 0.5em 0 0;
                    transform-origin: 0.5em 0 0; }
        .illusion-number .illusion-number-tiles .illusion-number-tile-y-2 {
            left: 2em;
            -webkit-transform-origin: -0.5em 0 0;
               -moz-transform-origin: -0.5em 0 0;
                    transform-origin: -0.5em 0 0; }
        .illusion-number .illusion-number-tiles .illusion-number-animation-out-1 {
            -webkit-animation-name: illusion-number-animation-out-1;
               -moz-animation-name: illusion-number-animation-out-1;
                    animation-name: illusion-number-animation-out-1; }

@-webkit-keyframes illusion-number-animation-out-1 {
    0% {
        -webkit-transform: rotateY(0) translateZ(1.5em);
                transform: rotateY(0) translateZ(1.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(1.5em);
                transform: rotateY(-90deg) translateZ(1.5em);
        background-color: #707070; } }

@-moz-keyframes illusion-number-animation-out-1 {
    0% {
        -moz-transform: rotateY(0) translateZ(1.5em);
             transform: rotateY(0) translateZ(1.5em);
        background-color: #dcdcdc; }
    100% {
        -moz-transform: rotateY(-90deg) translateZ(1.5em);
             transform: rotateY(-90deg) translateZ(1.5em);
        background-color: #707070; } }

@keyframes illusion-number-animation-out-1 {
    0% {
        -webkit-transform: rotateY(0) translateZ(1.5em);
           -moz-transform: rotateY(0) translateZ(1.5em);
                transform: rotateY(0) translateZ(1.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(1.5em);
           -moz-transform: rotateY(-90deg) translateZ(1.5em);
                transform: rotateY(-90deg) translateZ(1.5em);
        background-color: #707070; } }
        .illusion-number .illusion-number-tiles .illusion-number-animation-in-1 {
            -webkit-animation-name: illusion-number-animation-in-1;
               -moz-animation-name: illusion-number-animation-in-1;
                    animation-name: illusion-number-animation-in-1; }

@-webkit-keyframes illusion-number-animation-in-1 {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(1.5em);
                transform: rotateY(90deg) translateZ(1.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(0) translateZ(1.5em);
                transform: rotateY(0) translateZ(1.5em);
        background-color: #dcdcdc; } }

@-moz-keyframes illusion-number-animation-in-1 {
    0% {
        -moz-transform: rotateY(90deg) translateZ(1.5em);
             transform: rotateY(90deg) translateZ(1.5em);
        background-color: #dcdcdc; }
    100% {
        -moz-transform: rotateY(0) translateZ(1.5em);
             transform: rotateY(0) translateZ(1.5em);
        background-color: #dcdcdc; } }

@keyframes illusion-number-animation-in-1 {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(1.5em);
           -moz-transform: rotateY(90deg) translateZ(1.5em);
                transform: rotateY(90deg) translateZ(1.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(0) translateZ(1.5em);
           -moz-transform: rotateY(0) translateZ(1.5em);
                transform: rotateY(0) translateZ(1.5em);
        background-color: #dcdcdc; } }
        .illusion-number .illusion-number-tiles .illusion-number-animation-out-2 {
            -webkit-animation-name: illusion-number-animation-out-2;
               -moz-animation-name: illusion-number-animation-out-2;
                    animation-name: illusion-number-animation-out-2; }

@-webkit-keyframes illusion-number-animation-out-2 {
    0% {
        -webkit-transform: rotateY(0) translateZ(0.5em);
                transform: rotateY(0) translateZ(0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(0.5em);
                transform: rotateY(-90deg) translateZ(0.5em);
        background-color: #707070; } }

@-moz-keyframes illusion-number-animation-out-2 {
    0% {
        -moz-transform: rotateY(0) translateZ(0.5em);
             transform: rotateY(0) translateZ(0.5em);
        background-color: #dcdcdc; }
    100% {
        -moz-transform: rotateY(-90deg) translateZ(0.5em);
             transform: rotateY(-90deg) translateZ(0.5em);
        background-color: #707070; } }

@keyframes illusion-number-animation-out-2 {
    0% {
        -webkit-transform: rotateY(0) translateZ(0.5em);
           -moz-transform: rotateY(0) translateZ(0.5em);
                transform: rotateY(0) translateZ(0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(0.5em);
           -moz-transform: rotateY(-90deg) translateZ(0.5em);
                transform: rotateY(-90deg) translateZ(0.5em);
        background-color: #707070; } }
        .illusion-number .illusion-number-tiles .illusion-number-animation-in-2 {
            -webkit-animation-name: illusion-number-animation-in-2;
               -moz-animation-name: illusion-number-animation-in-2;
                    animation-name: illusion-number-animation-in-2; }

@-webkit-keyframes illusion-number-animation-in-2 {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(0.5em);
                transform: rotateY(90deg) translateZ(0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(0) translateZ(0.5em);
                transform: rotateY(0) translateZ(0.5em);
        background-color: #dcdcdc; } }

@-moz-keyframes illusion-number-animation-in-2 {
    0% {
        -moz-transform: rotateY(90deg) translateZ(0.5em);
             transform: rotateY(90deg) translateZ(0.5em);
        background-color: #dcdcdc; }
    100% {
        -moz-transform: rotateY(0) translateZ(0.5em);
             transform: rotateY(0) translateZ(0.5em);
        background-color: #dcdcdc; } }

@keyframes illusion-number-animation-in-2 {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(0.5em);
           -moz-transform: rotateY(90deg) translateZ(0.5em);
                transform: rotateY(90deg) translateZ(0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(0) translateZ(0.5em);
           -moz-transform: rotateY(0) translateZ(0.5em);
                transform: rotateY(0) translateZ(0.5em);
        background-color: #dcdcdc; } }
        .illusion-number .illusion-number-tiles .illusion-number-animation-out-3 {
            -webkit-animation-name: illusion-number-animation-out-3;
               -moz-animation-name: illusion-number-animation-out-3;
                    animation-name: illusion-number-animation-out-3; }

@-webkit-keyframes illusion-number-animation-out-3 {
    0% {
        -webkit-transform: rotateY(0) translateZ(-0.5em);
                transform: rotateY(0) translateZ(-0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(-0.5em);
                transform: rotateY(-90deg) translateZ(-0.5em);
        background-color: #707070; } }

@-moz-keyframes illusion-number-animation-out-3 {
    0% {
        -moz-transform: rotateY(0) translateZ(-0.5em);
             transform: rotateY(0) translateZ(-0.5em);
        background-color: #dcdcdc; }
    100% {
        -moz-transform: rotateY(-90deg) translateZ(-0.5em);
             transform: rotateY(-90deg) translateZ(-0.5em);
        background-color: #707070; } }

@keyframes illusion-number-animation-out-3 {
    0% {
        -webkit-transform: rotateY(0) translateZ(-0.5em);
           -moz-transform: rotateY(0) translateZ(-0.5em);
                transform: rotateY(0) translateZ(-0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(-0.5em);
           -moz-transform: rotateY(-90deg) translateZ(-0.5em);
                transform: rotateY(-90deg) translateZ(-0.5em);
        background-color: #707070; } }
        .illusion-number .illusion-number-tiles .illusion-number-animation-in-3 {
            -webkit-animation-name: illusion-number-animation-in-3;
               -moz-animation-name: illusion-number-animation-in-3;
                    animation-name: illusion-number-animation-in-3; }

@-webkit-keyframes illusion-number-animation-in-3 {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(-0.5em);
                transform: rotateY(90deg) translateZ(-0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(0) translateZ(-0.5em);
                transform: rotateY(0) translateZ(-0.5em);
        background-color: #dcdcdc; } }

@-moz-keyframes illusion-number-animation-in-3 {
    0% {
        -moz-transform: rotateY(90deg) translateZ(-0.5em);
             transform: rotateY(90deg) translateZ(-0.5em);
        background-color: #dcdcdc; }
    100% {
        -moz-transform: rotateY(0) translateZ(-0.5em);
             transform: rotateY(0) translateZ(-0.5em);
        background-color: #dcdcdc; } }

@keyframes illusion-number-animation-in-3 {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(-0.5em);
           -moz-transform: rotateY(90deg) translateZ(-0.5em);
                transform: rotateY(90deg) translateZ(-0.5em);
        background-color: #dcdcdc; }
    100% {
        -webkit-transform: rotateY(0) translateZ(-0.5em);
           -moz-transform: rotateY(0) translateZ(-0.5em);
                transform: rotateY(0) translateZ(-0.5em);
        background-color: #dcdcdc; } }
    .illusion-number .illusion-number-tiles-reverse div {
        -webkit-animation-direction: reverse;
           -moz-animation-direction: reverse;
                animation-direction: reverse; }