#outerholder {
    max-width: 600px;
}


#imgholder {
    overflow: visible;
    }


.pic, #frontpic, #backpic {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#imgholder img  {
    position: absolute;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.fside {
    /* Ausgangslage front */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0px);
    transform-origin: 100% 100% 0px;
}

.bsidefw {
    /* wartet links oben, kommt,wenn fw */
    transform: rotateX(87deg) rotateY(-5deg) rotateZ(-15deg) translate3d(-90%, 50%, 150px) scale3d(0.5,0.5,0.5); /*   */
    transform-origin: 100% 100% -800px;
}

.bsidebw {
    /* wartet rechts oben, kommt, wenn bw */
    transform: rotateX(87deg) rotateY(-5deg) rotateZ(-15deg) translate3d(90%, -50%, 10px) scale3d(0.5,0.5,0.5);
    transform-origin: 100% 100% -800px;
}


.flippedfw {
    /*  */
    animation: anim1fw 0.7s linear forwards;
}

.flippedfw2 {
     animation: anim2fw 0.7s linear forwards;
}

.flippedbw {
    animation: anim1bw 0.7s linear forwards;
}

.flippedbw2 {
     animation: anim2bw 0.7s linear forwards;
}


@keyframes anim1fw {
    /* von links oben */
    from {
    transform: rotateX(87deg) rotateY(-5deg) rotateZ(-15deg) translate3d(-90%, 50%, 150px) scale3d(0.5,0.5,0.5); /*   */
    transform-origin: 100% 100% -800px;
    }
    /* nach front */
    to {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0px);
    transform-origin: 100% 100% 0px;
    }
}

@keyframes anim2fw {
    /* von front */
    0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0px);
    transform-origin: 100% 100% 0px;
    }
    /* nach rechts oben */
    100% {
    transform: rotateX(87deg) rotateY(-5deg) rotateZ(-15deg) translate3d(90%, -50%, 10px) scale3d(0.5,0.5,0.5);
    transform-origin: 100% 100% -800px;
    /* visibility: hidden; */
    }
}

/* Neu */


@keyframes anim1bw {
    /* von rechts oben */
    from {
    transform: rotateX(87deg) rotateY(-5deg) rotateZ(-15deg) translate3d(90%, -50%, 10px) scale3d(0.5,0.5,0.5);
    transform-origin: 100% 100% -800px;  /* -800px */
    }
    /* nach front */
    to {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0px);
    transform-origin: 100% 100% 0px;
    }
}

@keyframes anim2bw {
    /* von front */
    from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0px);
    transform-origin: 100% 100% 0px;
    }
    /* nach links oben */
    to {
    transform: rotateX(87deg) rotateY(-5deg) rotateZ(-15deg) translate3d(-90%, 50%, 150px) scale3d(0.5,0.5,0.5); /*   */
    transform-origin: 100% 100% -800px;
    }
}