1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
现在我们以这个苹果的图片作为例子
我将演示代码写在这个页面网页链接，下面解释其用法。
页面结构如图
javascript代码如下
$(function() {
var r = 0
$('img').click(function() {
r += 90
$(this).css('transform', 'rotate(' + r + 'deg)')
})
})
核心思路是控制图片的这个css属性：
transform: rotate(360deg)
其中360deg就是360度，点一次旋转90度
js控制div旋转的例子：<DIV id=aDiv style="WIDTH: 70pxPOSITION: absoluteHEIGHT: 70px">
<IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图
<DIV>
//使角度转起来
var angle = 0
function doRotate() {
//检查并确保角度值在0到360之间
if(angle>360) angle-=360
//使角度增加
angle+=15
//do rotation
rotate("aDiv",angle)
//定位旋转中心
var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.
el.style.top = 25 - (el.offsetHeight/2)//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试
el.style.left = 25 - (el.offsetWidth/2)//父元素的宽度/2-旋转元素度/2
//循环
setTimeout("doRotate()",20)
}
