调整后旋转

Question

格的宽度和高度。如果我有这些规则：

 
width:50px; 
height:100px; 
-moz-transform: rotate(0deg) 

，然后一个事件改变转化为：

 
-moz-transform: rotate(90deg) 

逻辑，不应该是自动交换的宽度和高度？我需要旋转来切换宽度和高度以进行精确的位置检测。

感谢，

乔

Answer 1

好像一切后的变换应用，所以不更新宽度和高度。我能想到的最好的办法是你自己计算旋转的尺寸，使用旋转矩阵：

[ cos X  -sin X ] [ width ] 
[ sin X  cos X ] [ height ] 

它的简单翻译成JavaScript这一点。您需要旋转所有四个角（0,0）（w，0）（0，h）（w，h），然后旋转的尺寸是旋转的边界矩形的宽度和高度。

var angle = angle_in_degrees * Math.PI/180, 
    sin = Math.sin(angle), 
    cos = Math.cos(angle); 

// (0,0) stays as (0, 0) 

// (w,0) rotation 
var x1 = cos * width, 
    y1 = sin * width; 

// (0,h) rotation 
var x2 = -sin * height, 
    y2 = cos * height; 

// (w,h) rotation 
var x3 = cos * width - sin * height, 
    y3 = sin * width + cos * height; 

var minX = Math.min(0, x1, x2, x3), 
    maxX = Math.max(0, x1, x2, x3), 
    minY = Math.min(0, y1, y2, y3), 
    maxY = Math.max(0, y1, y2, y3); 

var rotatedWidth = maxX - minX, 
    rotatedHeight = maxY - minY; 

Answer 2

下面是我已经实现的最优雅的JavaScript解决方案。

// suppose, we know width, height and rotation angle (deg) 
var width, height, angle; 

var rad = angle * Math.PI/180, 
    sin = Math.sin(rad), 
    cos = Math.cos(rad); 

var newWidth = Math.abs(width * cos) + Math.abs(height * sin), 
    newHeight = Math.abs(width * sin) + Math.abs(height * cos);