@EryTi

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

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

Код: https://codepen.io/T_Erm/pen/OJYPJpN?editors=1111
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
@historydev Куратор тега JavaScript
Острая аллергия на анимешников
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)`;
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы