6

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

введите сюда описание изображения

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

введите сюда описание изображения

5
  • transform-origin
    – SVE
    29 мар 2017 в 17:26
  • @Elena он же изменит точку относительно которой объект вращается, но габариты блока останутся 29 мар 2017 в 17:30
  • тогда добавляйте tranlsate
    – SVE
    29 мар 2017 в 17:33
  • @Elena мне не сдвинуть надо его, а что бы его размер пересчитался, если сейчас у него размеры 200х200, то после трансформации размеры стали 282.84х282.84. Или такое средствами CSS невозможно? 29 мар 2017 в 17:39
  • простите, не поняла вопрос)
    – SVE
    29 мар 2017 в 17:41

2 ответа 2

3

Вызов .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>

1

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>

2
  • А откуда коэффициенты скейла? Подогнали вручную? 30 мар 2017 в 8:02
  • @SashaOmelchenko вы издеваетесь? слова "теорема Пифагора" ничего не говорят? 30 мар 2017 в 18:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.