height - 旋转后调整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 很简单。您需要旋转所有四个 Angular (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;