photo.css

.photo{
    perspective:800px;
    width: 800px;
}
.container{
    width: 800px;
    height: 500px;
    margin:0 auto;
    position:relative;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    animation: rotate-frame 10s linear infinite;

}
.img{
    width: 200px;
    height: 118px;
    line-height: 118px;
    text-align: center;
    position:absolute;
    top:160px;
    left:300px;
    box-shadow:0 0 20px rgba(0,0,0,0.9) inset;
    -webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
    backgound:-webkit-gradient(linear,0 0,0 bottom,from(#ccccff),to(rgba(174,221,129,0.5)));
    transform:rotateY(0deg);
}
.img1{
     transform:rotateY(0deg) translateZ(300px);
 }
.img2{
    transform:rotateY(40deg) translateZ(300px);
}
.img3{
    transform:rotateY(80deg) translateZ(300px);
}
.img4{
    transform:rotateY(120deg) translateZ(300px);
}
.img5{
    transform:rotateY(160deg) translateZ(300px);
}
.img6{
    transform:rotateY(200deg) translateZ(300px);
}
.img7{
    transform:rotateY(240deg) translateZ(300px);
}
.img8{
    transform:rotateY(280deg) translateZ(300px);
}
.img9{
    transform:rotateY(320deg) translateZ(300px);
}
@keyframes rotate-frame {
    0% {
        transform: rotateX(-20deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(-20deg) rotateY(36deg);
    }
    20% {
        transform: rotateX(-20deg) rotateY(72deg);
    }
    30% {
        transform: rotateX(-20deg) rotateY(108deg);
    }
    40% {
        transform: rotateX(-20deg) rotateY(144deg);
    }
    50% {
        transform: rotateX(-20deg) rotateY(180deg);
    }
    60% {
        transform: rotateX(-20deg) rotateY(216deg);
    }
    70% {
        transform: rotateX(-20deg) rotateY(252deg);
    }
    80% {
        transform: rotateX(-20deg) rotateY(288deg);
    }
    90% {
        transform: rotateX(-20deg) rotateY(324deg);
    }
    100% {
        transform: rotateX(-20deg) rotateY(360deg);
    }
}