旋转后调整div宽度和高度

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