现在我们以这个苹果的图片作为例子
我将演示代码写在这个页面网页链接，下面解释其用法。
页面结构如图
javascript代码如下
$(function() {
var r = 0
$('img').click(function() {
r += 90
$(this).css('transform', 'rotate(' + r + 'deg)')
})
})
核心思路是控制图片的这个css属性：
transform: rotate(360deg)
其中360deg就是360度，点一次旋转90度
// max - 期望的最大值var randomNum = Math.floor(Math.random()*max)+1
这样就能随机到你所期望的最大值到1之间的随机数；你再根据取到的数值去做图片的对应关系。转动要看你是要什么样的效果用动画做一个，很简单
这是数学题啊....
Rotate = function(Source,Angle)//Angle为正时逆时针转动, 单位为弧度{
var A,R
A = Math.atan2(Source.Y,Source.X)//atan2自带坐标系识别, 注意X,Y的顺序
A += Angle//旋转
R = Math.sqrt(Source.X * Source.X + Source.Y * Source.Y)//半径
return {
X : Math.cos(A) * R,
Y : Math.sin(A) * R
}
}
Rotate({X : 0,Y : 4},-Math.PI / 4)
注意, 由於牵扯浮点运算, 所以你如果调用
Rotate({X : 0,Y : 4},Math.PI / 2)
返回可能会是{X: -4, Y: 4.898425415289509e-16}
Y很小但不等於0
当然如果用矩阵变换也是可以写的..
