問題描述

如果我有這些規則:

然后一個事件將轉換更改為:

從邏輯上講，這不應該自動交換寬度和高度嗎?我需要旋轉來切換寬度和高度以進行準確的位置檢測.

謝謝，

喬

似乎轉換是在其他所有內容之后應用的，所以寬度和高度沒有更新.我能想到的最佳解決方案是使用旋轉矩陣自己計算旋轉尺寸:

[ cos X -sin X ] [ width ][ 罪 X cos X ] [ 高度 ]

將其轉換為 JavaScript 很簡單.您需要旋轉所有四個角 (0,0) (w,0) (0,h) (w,h)，然后旋轉的尺寸是旋轉邊界矩形的寬度和高度.

var angle = angle_in_degrees * Math.PI/180,sin = Math.sin(角度),cos = Math.cos(角度);//(0,0) 保持為 (0, 0)//(w,0) 旋轉var x1 = cos * 寬度，y1 = sin * 寬度；//(0,h) 旋轉var x2 = -sin * 高度，y2 = cos * 高度；//(w,h) 旋轉var x3 = cos * 寬度 - sin * 高度，y3 = sin * 寬度 + cos * 高度；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 rotateWidth = maxX - minX,旋轉高度 = maxY - minY;

If I have these rules:

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

and then an event changes the transform to:

-moz-transform: rotate(90deg)

logically, shouldn't that automatically exchange the width and the height? I need the rotate to switch width and height for accurate position detection.

Thanks,

Joe

It seems like the transform is applied after everything else, so the width and height aren't updated. The best solution I can think of is to calculate the rotated dimensions yourself, using the rotation matrix:

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

It's straightforward to translate this into JavaScript. You need to rotate all four corners (0,0) (w,0) (0,h) (w,h) and then the rotated dimensions are the width and height of the rotated bounding rectangle.

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;

這篇關于旋轉后調整div的寬度和高度的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！