css3动画(图片翻转)

 

 





<!DOCTYPE html>


<html>




<head>


    <meta charset="utf-8">


    <title></title>


    <style type="text/css">


        div {


            background-color: red;


            width: 400px;


            height: 200px;


            background: url(bootstrap-imags/fw_img1.png) center no-repeat;


            transform-style: preserve-3d;


            cursor: pointer;


        }





        div:hover {


            animation-name: x-spin;


            animation-duration: 0.5s;


            /* animation-iteration-count: infinite; */


            animation-timing-function: ease;


        }





        @keyframes x-spin {


            0% {


                transform: rotateY(0deg);






            }





            50% {


                transform: rotateY(180deg);





            }





            100% {


                transform: rotateY(360deg);





            }


        }


    </style>


</head>





<body>


    <div></div>


</body>






</html>





 




 




 


 转载：https://blog.csdn.net/wu_xiao_qing/article/details/70162082






		

		
posted @ 
2021-03-30 10:22 
搬砖小伙子 
阅读(110) 
评论(0) 
 
收藏 
举报