js和CSS实现图片旋转

需求大概是，鼠标移入，头像正向旋转，鼠标移除，头像逆向回转。分别用了CSS动画还有JS实现，但是JS给我感觉会好点，因为我希望实现的是鼠标进入，获取当前旋转角度，正向加旋，鼠标移除，获取当前角度，逆向减旋，后面发现css实现的动画，是从你设置的初始开始，即鼠标进入，从0开始，鼠标移出，从360度开始，所以不是很理想。纠结半天最后最后发现用transition是最优解。
以下是全部代码，全局调用vert可以看CSS动画的实现，调用test()可以查看js实现。
test主要用到了定时器，每隔10ms就调用一次，设置旋转的角度。

这里是style部分

body{
	margin:0;
	padding: 0;
}
.head_portrait{
	width: 80px;
	height: 80px;
	border-radius: 50px;
}
.content{
	position: relative;
	width: 80px;
	height: 80px;
}
@keyframes img-animation{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes img-animation-out{
	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}

页面部分

<div class="content">
	<img class="head_portrait" src="#" alt="图片无法显示">
</div>

js实现图片的旋转
这里是JS部分

var angle=0;
var obj;
test();
function vert(){
	var content = document.querySelector(".content");
	content.onmouseover=function(){
		var head_portrait=document.querySelector(".head_portrait");
		head_portrait.style.animation="img-animation 1s ease-out";
		head_portrait.style.webkitAnimation ="img-animation 1s ease-out";
		head_portrait.style.animationFillMode="forwards";
		head_portrait.style.webkitAnimationFillMode="forwards";
	}
	content.onmouseout=function(){
		var head_portrait=document.querySelector(".head_portrait");
		head_portrait.style.animation="img-animation-out 1s ease-out";
		head_portrait.style.webkitAnimation ="img-animation-out 1s ease-out";
		head_portrait.style.animationFillMode="forwards";
		head_portrait.style.webkitAnimationFillMode="forwards";
	}
}

function test(){
	var content = document.querySelector(".content");
	content.onmouseover=function(){
		window.clearInterval(obj);
		obj = window.setInterval(revert,10);
	}
	content.onmouseout=function(){
		window.clearInterval(obj);
		obj = window.setInterval(antivert,10);
	}
}
function revert(){
	var head_portrait=document.querySelector(".head_portrait");
	head_portrait.style.transform="rotate("+angle+"deg)";
	if(angle<360){
		angle+=3.6;
	}else{
		clearInterval(obj);
	}
}
function antivert(){
	var head_portrait=document.querySelector(".head_portrait");
	head_portrait.style.transform="rotate("+angle+"deg)";
	if(angle>0){
		angle-=3.6;
	}else{
		clearInterval(obj);
	}
}

发现了另一个最优实现方法。。。帖粗来。。

div:{
	transition:transform 2s linear; //表示对transform这个属性进行变化
} 
div:hover {
      transform:rotate(360deg);//如果鼠标移入，div会旋转，而且还会在你移开时回旋，最好的办法
}