~~~ 要点：animation: front 3s infinite; 动画 name 时间 循环infinite无限的/n 规定次数 //分时段效果 @keyframes front { 0%{ transform: rotateY(0) } 50%{ transform: rotateY(180deg) } 100%{ transform: rotateY(360deg) } } ~~~ ~~~ <style> .parent{ perspective: 400px; border:1px solid #333; width:200px; height:300px; padding:10px; } .parent>div{ width:200px; height:300px; background-size: cover; backface-visibility: hidden; position:absolute; } .front{ z-index: 100; background:url("images/01.png"); animation: front 3s infinite; } .back{ background:url("images/02.png"); animation: back 3s infinite; } @keyframes front { 0%{ transform: rotateY(0) } 50%{ transform: rotateY(180deg) } 100%{ transform: rotateY(360deg) } } @keyframes back{ 0%{ transform: rotateY(-180deg) } 50%{ transform: rotateY(0deg) } 100%{ transform: rotateY(180deg) } } ~~~ ~~~ div class="parent"> <div class="front"> </div> <div class="back"> </div> </div> ~~~