Ajuste de la anchura y la altura div después girada

Question

Si tengo estas reglas:

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

y luego un evento cambia la transformación para:

 
-moz-transform: rotate(90deg) 

lógicamente, no debería que intercambian automáticamente el ancho y ¿la altura? Necesito la rotación para cambiar el ancho y el alto para una detección de posición precisa.

Gracias,

Joe

Answer 1

Parece que la transformación se aplica después de todo lo demás, por lo que la anchura y la altura no se actualizan. La mejor solución que se me ocurre es calcular las dimensiones rotados sí mismo, utilizando la matriz de rotación:

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

Es fácil de traducir esto en JavaScript. Debe girar las cuatro esquinas (0,0) (w, 0) (0, h) (w, h) y luego las dimensiones giradas son el ancho y la altura del rectángulo delimitador girado.

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

Aquí está la solución de JavaScript más elegante que he logrado.

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