Ширина/высота после преобразования

Как получить свойства ширины и высоты после того, как я применил transform: rotate(45deg);?

Как, 11x11 квадрат после вращения становится 17x17 (результат Chrome), но javascript по-прежнему возвращает оригинальную ширину/высоту - 10x10.

Как мне получить этот 17x17?

Ответ 1

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

  <style type="text/css">
  #wrap {
    border:1px solid green;
    float:left;
    }

  #box {
    -moz-transform:rotate(120deg);
    border:1px solid red;
    width:11px;
    height:11px;
  }
  </style>

  <script type="text/javascript">
  $(document).ready(function() {
    alert($('#box').width());
    alert($('#wrap').width());
  });
  </script>
</head>

<body>
 <div id="wrap">
  <div id="box"></div>
  </div>
</body>

Redited: решение оболочки не работает должным образом, так как обертка автоматически не настраивается на содержимое внутреннего div. Следуйте математическому решению:

var rotationAngle;

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);

Ответ 2

Вместо собственного вычисления вы можете получить это через HTMLDOMElement getBoundingClientRect().

Это вернет объект с правильными height и width с учетом матрицы преобразования.

jsFiddle.

Ответ 3

Я сделал функцию для этого, domvertices.js

Он вычисляет 4-х вершинные 3d-координаты любого DOM-элемента с глубоким transform и position ed - на самом деле просто любого элемента: см. DEMO.

a                b
 +--------------+
 |              |
 |      el      |
 |              |
 +--------------+
d                c

var v = domvertices(el);
console.log(v);
{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}

С этими вершинами вы можете вычислить все что угодно: ширина, высота... Например, в вашем случае:

// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));

Смотрите README для получения дополнительной информации.

Он публикуется как модуль npm (без депозита), поэтому просто установите его с помощью:

npm install domvertices

Приветствия.

Ответ 4

Если вы ищете функцию для программного вычисления этих значений...

// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el){
    return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle){
    var dimensions = getPositionData(el);
    return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) };
}

Вот кое-что, что я терплю. Наверное, это не лучшая вещь, но я работаю для меня.

Ответ 5

Я пишу этот ответ, так как вы отметили JQuery.

JQuery принимает во внимание коэффициенты преобразования при расчете размеров.

Итак, если вы используете

$('mySelector').width()

он даст вам фактическую ширину. То же самое происходит с height(), left() и top()