/* css3 让一个图片不断翻转示例代码 */
#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat;
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover;
/* 随便设置宽高值，测试 */
width:200px;
height:200px;
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
-webkit-animation:play 3s linear infinite;
-moz-animation:play 3s linear infinite;
animation:play 3s linear infinite;
}
@-webkit-keyframes play{
0%  {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg);
/*
垂直翻转
-webkit-transform:rotateX(0deg);
顺时针旋转
-webkit-transform:rotate(0deg);
逆时针旋转
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg);
/* 垂直翻转
-webkit-transform:rotateX(360deg);
顺时针旋转
-webkit-transform:rotate(360deg);
逆时针旋转
-webkit-transform:rotate(-360deg);
*/
}
}
@-moz-keyframes play{
0%  {
-moz-transform:rotateY(0deg);
/*
-moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg);
*/
}
100% {
-moz-transform:rotateY(360deg);
/*
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg);
*/
}
}
@keyframes play{
0%  {
transform:rotateY(0deg);
/*
transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg);
*/
}
100% {
transform:rotateY(360deg);
/*
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg);
*/
}
}
<!-- html 布局代码 -->
<div id="gavinPlay"></div>