Réglage de la largeur de div et de la hauteur après pivotée

Question

Si je ces règles:

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

puis un événement change la transformation à:

 
-moz-transform: rotate(90deg) 

logiquement, ne devrait pas ÉCHANGEUR automatiquement la largeur et la hauteur? J'ai besoin de la rotation pour changer la largeur et la hauteur pour une détection de position précise.

Merci,

Joe

Answer 1

Il semble que la transformation est appliquée après tout le reste, ne sont donc pas mis à jour la largeur et la hauteur. La meilleure solution que je peux penser est de calculer les dimensions pivotés vous, en utilisant la matrice de rotation:

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

Il est facile de traduire en JavaScript. Vous devez faire pivoter les quatre coins (0,0) (w, 0) (0, h) (w, h), puis les cotes tournées représentent la largeur et la hauteur du rectangle de délimitation pivoté.

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

Voici la solution JavaScript la plus élégante que j'ai obtenue.

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