二、正常情况下，transition是加到设置元素样试的CSS中的，而transform是添加到动态伪类选择器:hover后的
三、如果要实现鼠标悬停后元素旋转360不回去，可将transition也加到:hover后面
举例：
<style>
.bg{
width: 200px
height: 200px
margin: 10px
box-shadow: 0 1px 8px #666
}
.bg:hover{
transition: all 0.5s ease-in
transform:rotate(360deg)
}
</style>
<div class="bg"></div>
不知道是不是你要的效果，望采纳！！！
你只设置了一个状态，当然只转一次了，采纳即可<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var i = 1
$(document).ready(function() {
$("img").click(function() {
var deg = i == 1 ? 180 : 0
$("img").css({
transform: 'rotateX(' + deg + 'deg)',
transition: 'all 2s ease-out'
})
i = -i
})
})
</script>
</head>
<body>
<p><b>180度旋转 onMouseover</b>
</p>
<p id="socialicons3">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" />
</a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" />
</a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" />
</a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" />
</a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" />
</a>
</p>
</body>
</html>
原点设置一次即可，不需要多次设置，只要在转180度以后，再次旋转180度（也就是从180度转到360度）即可，继续累加就继续转（可以超过360度）。比如：
<style>div {
position:absolute
left:200px
top:200px
transform-origin:-30px center
transition:all 1s
}
</style>
<button>旋转180度</button>
<div>文字A</div>
<script>
var jd=0
window.onload=function(){
document.querySelector("button").onclick=function(){
jd+=180
document.querySelector("div").style.transform="rotate("+jd+"deg)"
}
}
</script>
