如果我有这些规则：
width:50px; height:100px; -moz-transform: rotate(0deg)
然后一个事件将转换更改为：
-moz-transform: rotate(90deg)
从逻辑上讲,不应该自动交换宽度和高度？我需要旋转来切换宽度和高度,以便进行精确的位置检测.
谢谢,
乔
解决方法
看起来变换是在其他所有内容之后应用的,因此宽度和高度不会更新.我能想到的最好的解决方案是使用旋转矩阵自己计算旋转的尺寸：
[ 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,minY = Math.min(0,y1,y2,y3),maxY = Math.max(0,y3); var rotatedWidth = maxX - minX,rotatedHeight = maxY - minY;
