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

旋转后调整div宽度和高度

2 个答案: