CSS Границы элемента при его трансформации

Здравствуйте. Если к элементу применить CSS свойство transform: rotate(45deg) он развернется, но положение в потоке не изменит

Возможно ли сделать так, чтобы границы блока пересчитались и рассчитывались по углам, например так:

Ответ

Вызов .getBoundingClientRect() всегда возвращает актуальные габариты элемента, в т. ч. после трансформации. Нам понадобятся его свойства width и height. Чтобы центр вращения всегда был внутри внешней обертки нам надо выровнять его по вертикали и горизонтали, для этого поставим обертке свойство display: inline-flex, а самому элементу margin: auto. Далее, при каждом вращении будем устанавливать ширину и высоту вращаемого элемента обертке.
let rotationAngle = 0, el = document.querySelector('.el'), wrapper = document.querySelector('.wrapper'); recalcDimensions(30); document.querySelector('.rotator').addEventListener('click', recalcDimensions.bind("", 5)); function recalcDimensions(rotateAngle) { rotationAngle += rotateAngle; el.style.transform = "rotate(" + rotationAngle + "deg)"; let w = el.getBoundingClientRect().width, h = el.getBoundingClientRect().height; wrapper.style.width = w + 'px'; wrapper.style.height = h + 'px'; } .wrapper { display: inline-flex; background-color: #000; position: relative; } .el { display: block; margin: auto; width: 250px; height: 250px; background-color: #ccc; } .rotator { position: absolute; right: 10px; top: 10px; padding: 10px 20px; }