css3 自动水平翻转

<div>
    <img  src="图片路径">
</div>
<style type="text/css">
    img{animation: hove 3s linear infinite;webkit-animation: hove 3s linear infinite;}
    @-webkit-keyframes hove {
        0% {-webkit-transform: rotateY(0);}
        25% {-webkit-transform: rotateY(-180deg);}
        50% {-webkit-transform: rotateY(-360deg);}
        100% {-webkit-transform: rotateY(-360deg);}
    }
    @keyframes hove {
        0% {transform: rotateY(0);}
        25% {-webkit-transform: rotateY(-180deg);}
        50% {-webkit-transform: rotateY(-360deg);}
        100% {-webkit-transform: rotateY(-360deg);}
    }
</style>

 

posted @ 2021-10-18 10:58  smile_Lu  阅读(112)  评论(0)    收藏  举报