Здравствуйте.
Если к элементу применить CSS свойство transform: rotate(45deg)
он развернется, но положение в потоке не изменит
Возможно ли сделать так, чтобы границы блока пересчитались и рассчитывались по углам, например так:
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЗдравствуйте.
Если к элементу применить 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;
}
<div class=wrapper>
<div class=el></div>
</div>
<button class=rotator>rotate me!</button>
div {
position: relative;
}
div::after,
div::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
div::after {
background-color: rgba(0, 255, 0, .3);
}
div::before {
background-color: rgba(0, 0, 255, .3);
transform: rotate(45deg) scale(.70711356, .70711356);
}
<div></div>