3D -> Flip images 3 parties

HTML

<div id="flip">
    <div class="img" id="img1">
        <div class="nth1"></div>
        <div class="nth2"></div>
        <div class="nth3"></div>
    </div>
    <div class="img" id="img2">
        <div><img src="http://flickholdr.com/600/350/sea"/></div>
    </div>
    <div class="img" id="img3">
        <div><img src="http://flickholdr.com/600/350/sea"/></div>
    </div>
</div>

CSS

body{
    background:#aaa;
}
.img{
   position:absolute;
    z-index:100;
   width:500px;
   height:300px; 
   -webkit-transform-style:preserve-3d;
   -webkit-backface-visibility:hidden; 
}
#flip::before{
content:"";
position:absolute;z-index:50;
bottom:0px;right:0px;
height:10px;width:500px;
border-radius:250px 250px 250px 250px/5px 5px 5px 5px;
box-shadow:0px 20px 8px rgba(0,0,0,0.35);
-webkit-transition:-webkit-transform 1s ease;
}
/*
#flip::after{
content:"";
position:absolute;z-index:150;
height:300px;width:500px;
background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.8),rgba(255,255,255,0));
}
*/

.img div{
    width:500px;
    height:100px;
    background:url('http://lorempixel.com/500/300/sports/2');
    /*-webkit-transition:-webkit-transform 1s ease;*/
    -webkit-animation:turn 10s ease infinite;
}
.img div:nth-child(1){
box-shadow:0 1px 0px rgba(255,255,255,.8) inset;  
}

.img div.nth2{
    background-position:center;
    -webkit-transition-delay:.1s;
    -webkit-animation-delay:.1s;
}
.img div.nth3{
    background-position:bottom;
    -webkit-transition-delay:.2s;
    -webkit-animation-delay:.2s;
    box-shadow:0 -1px 0px rgba(0,0,0,.3) inset;
    /*-webkit-box-reflect:below 0px -webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));*/
}
#img2{
    -webkit-transform:rotateY(180deg);
}
#img2 div{
    background:url('http://lorempixel.com/500/300/sports/3');
    -webkit-backface-visibility:hidden;
}
#img2 div:nth-child(2){
    background-position:center;
    -webkit-transition-delay:.1s;
    -webkit-transition-delay:.1s;
}
#img2 div:nth-child(3){
    background-position:bottom;
    -webkit-transition-delay:.2s;
    -webkit-transition-delay:.2s;
}
#flip{
    margin:50px;
    width:500px;height:300px;
    -webkit-perspective:500px;
    
}
#flip:hover .img div{
    -webkit-transform:rotateY(-180deg);
}
#flip:hover::before,#flip:hover::after{
    -webkit-transform:rotateY(180deg);
}

@-webkit-keyframes turn{
   ...