**原理：**
利用@keyframes动画效果实现自动翻转
//
//
html
~~~
~~~
css
~~~
.container {
position: relative;
}
.container img {
width: 250px;
height: 250px;
vertical-align: bottom; //使图片从底部对齐，不会有缝隙
}
.front, .back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
/*---定义图片翻转动画---*/
@keyframes toback {
0% {transform: rotateY(0deg);}
50% {transform: rotateY(180deg);}
100% {transform: rotateY(360deg);}
}
@keyframes tofront {
0% {transform: rotateY(-180deg);}
50% {transform: rotateY(0deg);}
100% {transform: rotateY(180deg)}
}
.front {
animation: toback 3s infinite;
}
.back {
animation: tofront 3s infinite;
}
/*---在外部加边框和阴影---*/
.front, .back {
border: 5px solid white;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
}
~~~
