示例代码如下:
<style>
*{margin:0padding:0}/*简单可以自定义,参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, Systembackground-color:#FFF}
#imgg{animation:imgg 1s linear 0s infinite}
@keyframes imgg{0% {transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100% {transform:rotateY(360deg)}}
</style>
<div id="demo">
<img src="图片地址" alt="" width="100" height="100" id="imgg">
</div>
可以使用css3中的rotate实现
实际的旋转效果是这样:
rotate中的 60deg 表示按最原始的位置,顺时针旋转60°
w3school 里面有更详细用法,可以2D旋转、3D旋转
可以参考:网页链接
动画效果可以通过js改变rotate中传入的值来实现