#imgholder {
    perspective: 500px;
}

.div3div {
    position: absolute;
    width: 20%;
    height: 100%;
    perspective: 500px;
    transform-style: preserve-3d;
    transition: transform 0.7s linear;
}

.div3div > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    background-size: cover;
    /* transition: 1s linear; */
}

.divb, .divf {
    perspective: 500px;
    transform: rotateY(0deg);
}

.divf {
   backface-visibility: hidden;
}

.divb {
    transform: rotateY(180deg);
}


.p100 {
    background-position: 100%;
}

.p75 {
    background-position: 75%;
}

.p50 {
    background-position: 50%;
}

.p25 {
    background-position: 25%;
}

.p0  {
    background-position: 0;
}


.left0 {
    left: 0%;
    /* transition: 0.1s ease-in; */
}

.left20 {
    left: 20%;
    /* transition: 0.2s ease-in; */
}

.left40 {
    left: 40%;
    /* transition: 0.3s ease-in; */
}

.left60 {
    left: 60%;
    /* transition: 0.4s ease-in; */
}

.left80 {
    left: 80%;
    /* transition: 0.5s ease-in; */
}