Корректировка ширины отделения и высоты, после того, как повернуто

Question

Корректировка ширины отделения и высоты, после того, как повернуто

Если у меня есть эти правила:

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

и затем событие изменяет преобразование на:

-moz-transform: rotate(90deg)

логически, это не должно автоматически обмениваться шириной и высотой? Мне нужно поворачивание для переключения ширины и высоты для точного обнаружения положения.

Спасибо,

Joe

8

css height width css3 rotation

задан Joe Longstreet 18 July 2010 в 17:12

1 ответ

Другие вопросы по тегам:

css height width css3 rotation

Похожие вопросы:

score 22 · Accepted Answer

Похоже, что преобразование применяется после всего остального, поэтому ширина и высота не обновляются. Лучшее решение, которое я могу придумать, - это вычислить повернутые размеры самостоятельно, используя матрицу вращения:

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