Как динамически увеличить родительский блок в зависимости от градуса поворота дочернего?

Question

[EryTi]

Если к дочернему блоку через свойство transform применить поворот, то он выходит за границы родителя.
Возможно ли сделать так, чтобы в зависимости от градуса поворота отступ от родительского блока или размеры родительского блока, или размеры дочернего блока изменялись таким образом, чтобы отступ например при повороте дочернего блока в 45 градусов был идентичен отступам когда к дочернему блоку свойство transform не применяется и соответственно дочерний блок полностью вмещался в родительский не выходя за его пределы?

Код: https://codepen.io/T_Erm/pen/OJYPJpN?editors=1111

Answer 1

[historydev]

const rotate = document.querySelector("#rotate");
const container = document.querySelector(".container");

container.style.transform = `rotate(${45}deg)`;

rotate.addEventListener('input', (e) => {
  const degree = +e.target.value;
  const scaleStep = degree*0.001;
  const scale = degree === 0 && 1 || degree === 360 && 1 || scaleStep > 1 && 1 || scaleStep < 0.75 && 0.75 || scaleStep;
  container.style.transform = `scale(${scale}, ${scale}) rotate(${degree}deg)`;
});

Comments

[imko]

А не наоборот задача?

[EryTi]

Спасибо