調整後旋轉

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);