## 图片自动翻转效果 >效果如图  **原理：利用@keyframes动画效果实现自动翻转** > html代码 ``` <div class="container"> <div class="front"><img src="images/image-01.jpg" alt=""></div> <div class="back"><img src="images/image-02.jpg" alt=""></div> </div> ``` >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); } ```