默认情况下,旋转矩阵以原点作为旋转中心。如果要围绕任意点进行旋转,则必须使用平移矩阵减去到原点的距离进行旋转,然后再进行平移。但是这对我来说似乎并不奏效。假设我的对象大小为100x100,中心点位于50,50,以下是我的代码:
t = IDENTITY;
t = translate(t, -50, -50);
t = rotate(t, theta);
t = translate(t, 50, 50);
很不幸,如果我将这个变换矩阵t
应用到我的对象上,对象的位置就会出现错误。
我已经实现了一个快速的jsfiddle来演示我的问题:http://jsfiddle.net/9M3uy/67/
在JSFiddle中,红色旋转正方形是旋转应该结束的位置(由CSS3内置的transform-origin提供),而蓝色旋转正方形是我的计算结果(绿色是原始的非旋转正方形)。
有什么想法吗?我是不是没有理解如何使用平移、旋转、再平移回来的机制,还是我做错了什么?