Điều chỉnh chiều rộng và chiều cao div sau khi xoay

Question

Nếu tôi có những quy tắc:

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

và sau đó một sự kiện làm thay đổi chuyển hóa để:

 
-moz-transform: rotate(90deg) 

một cách logic, không nên tự động đổi chiều rộng và chiều cao? Tôi cần xoay để chuyển đổi chiều rộng và chiều cao để phát hiện vị trí chính xác.

Cảm ơn,

Joe

Answer 1

Nó có vẻ như các biến đổi được áp dụng sau khi mọi thứ khác, vì vậy chiều rộng và chiều cao không được cập nhật. Giải pháp tốt nhất mà tôi có thể nghĩ đến là tự tính toán các thứ nguyên đã xoay, sử dụng ma trận xoay:

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

Thật đơn giản để dịch nó thành JavaScript. Bạn cần phải xoay tất cả bốn góc (0,0) (w, 0) (0, h) (w, h) và sau đó kích thước xoay là chiều rộng và chiều cao của hình chữ nhật giới hạn xoay.

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

Đây là giải pháp JavaScript thanh lịch nhất mà tôi đã đạt được.

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