CSS 3D Transforms With CSS Animation

HTML

<div class="container">
    <div class="iphone-front"></div>
    <div class="iphone-back"></div>
</div>

CSS

.container{
    /* How pronounced should the 3D effects be */
    perspective: 800px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;

    background: radial-gradient(#e0e0e0, #aaa);
    background: -webkit-radial-gradient(#e0e0e0, #aaa);
    background: -moz-radial-gradient(#e0e0e0, #aaa);
    background: -o-radial-gradient(#e0e0e0, #aaa);
    width:480px;
    height:480px;
    margin:0 auto;
    border-radius:6px;
    position:relative;
}

.iphone-front,
.iphone-back{

    /* Enable 3D transforms */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;

    /* We are using two separate divs for the front and back of the
       phone. This will hide the divs when they are flipped, so that the
       opposite side can be seen:  */

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;

    width:200px;
    height:333px;

    position:absolute;
    top:50%;
    left:50%;
    margin:-166px 0 0 -100px;

    background:
    url(http://dice-academy.com/wp-content/uploads/2017/07/iphone.png) 
    no-repeat left center;

    /* Animate the transitions */
    transition:0.8s;
    -webkit-transition:0.8s;
    -moz-transition:0.8s;
    -o-transition:0.8s;
    -ms-transition:0.8s;
}

.iphone-back{

    /* The back side is flipped 180 deg by default */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);

    background-position:right center;
    animation:4s moving infinite alternate;
    -webkit-animation:4s moving infinite alternate;
    -moz-animation:4s moving infinite alternate;
    -o-animation:4s moving infinite alternate;
}
.iphone-front{
    animation:4s moving1 infinite alternate;
    -webkit-animation:4s moving1 infinite alternate;
    -moz-animation:4s moving1 infinite alternate;
    -o-animation:4s moving1 infinite alternate;
}
@keyframes moving{
    0%{transform:rotateY(180deg);}
    100%{transform:rotateY(540deg);}
}
@-webkit-keyframes moving{
    0%{-webkit-transform:rotateY(180deg);}
    100%{-webkit-transform:rotateY(540deg);}
}
@-moz-keyframes moving{
    0%{-moz-transform:rotateY(180deg);}
    100%{-moz-transform:rotateY(540deg);}
}
@-o-keyframes moving{
    0%{-o-transform:rotateY(180deg);}
    100%{-o-transform:rotateY(540deg);}
}


@keyframes moving1{
    0%{transform:rotateY(0deg);}
    100%{transform:rotateY(360deg);}
}
@-webkit-keyframes moving1{
    0%{-webkit-transform:rotateY(0deg);}
    100%{-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes moving1{
    0%{-moz-transform:rotateY(0deg);}
    100%{-moz-transform:rotateY(360deg);}
}
@-o-keyframes moving1{
    0%{-o-transform:rotateY(0deg);}
    100%{t-o-ransform:rotateY(360deg);}
}