.wrapper {
    display: none;
    position: absolute;
    top: 35%;
    width: 100%;
    margin-left: 75px;
}

.cssanimations.csstransforms3d .wrapper {
    display: block;
}

.wrapper * {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ie-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.zoetrope {
    height: 100px;
    width: 100px;
    margin: 0 auto;

    -webkit-perspective: 900;
    -moz-perspective: 900;
    -ie-perspective: 900;
    -o-perspective: 900;
    perspective: 900;

    -webkit-transform: rotateX(-11deg);
    -moz-transform: rotateX(-11deg);
    -ie-transform: rotateX(-11deg);
    -o-transform: rotateX(-11deg);
    transform: rotateX(-11deg);
}

.frames {
    position: relative;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1200ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation: spin 1200ms infinite linear;
    -ie-animation: spin 1200ms infinite linear;
    -o-animation: spin 1200ms infinite linear;
    animation: spin 1200ms infinite linear;
}

@keyframes spin {
    from { transform: rotateY(0); }
    to   { transform: rotateY(-360deg); }
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0); }
    to   { -webkit-transform: rotateY(-360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotateY(0); }
    to   { -moz-transform: rotateY(-360deg); }
}

@-ie-keyframes spin {
    from { -ie-transform: rotateY(0); }
    to   { -ie-transform: rotateY(-360deg); }
}

@-o-keyframes spin {
    from { -o-transform: rotateY(0); }
    to   { -o-transform: rotateY(-360deg); }
}

.frames > div, .frames > div:after, .frames > div:before {
    position: absolute;
    height: 100px;
    width: 100px;
}

.frames > div {
    background-color: white;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -ie-backface-visibility: visible;
    -o-backface-visibility: visible;
    backface-visibility: visible;
}

.zoetrope.ball .frames > div  {
    background-image: url("../images/balls.jpg");
}

.zoetrope.horse .frames > div {
    background-image: url("../images/muybridge.jpg");
}

.zoetrope.willie .frames > div {
    background-image: url("../images/willie.jpg");
}

.frames > div:before {
    content: "";
    background: black;
    width: 102px;
    /* HACK getting the :after positioned outside the wheel... */
    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
    -ie-transform: translateZ(1px);
    -o-transform: translateZ(1px);
    transform: translateZ(1px);
}

.frames > div:after {
    content: "";
    top: -98px;
    width: 102px;
    height: 100px;
    border-left: 35px solid black;
    border-right: 35px solid black;
    border-top: 15px solid black;
    border-bottom: 15px solid black;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ie-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
    -ie-transform: translateZ(1px);
    -o-transform: translateZ(1px);
    transform: translateZ(1px);
}