Einstellen div Breite und Höhe nach gedreht

Question

Wenn ich diese Regeln haben:

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

und ändert dann ein Ereignis, das zu transformieren:

 
-moz-transform: rotate(90deg) 

logisch, sollte automatisch die Breite nicht austauschen und die Höhe? Ich brauche das Drehen, um Breite und Höhe für genaue Positionserkennung zu wechseln.

Danke,

Joe

Answer 1

Es scheint, wie das sonst nach allem, was aufgetragen wird Transformations, so dass die Breite und Höhe werden nicht aktualisiert. Die beste Lösung, die ich denken kann, ist die gedrehten Dimensionen selbst zu berechnen, die Rotationsmatrix mit:

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

Es ist einfach dieses in JavaScript zu übersetzen. Sie müssen alle vier Ecken (0,0) (w, 0) (0, h) (w, h) drehen und dann sind die gedrehten Dimensionen die Breite und Höhe des gedrehten Begrenzungsrechtecks.

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

Hier ist die eleganteste JavaScript-Lösung, die ich erreicht habe.

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