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

#css #css3

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



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


    

Ответы

Ответ 1

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

  






Ответ 2

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);
}