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

Question

Хабиб

html , javascript , css , верстка

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

Каким образом можно адаптировать размеры родительского и дочернего блоков при применении поворота через свойство transform в CSS таким образом, чтобы границы дочернего блока не выходили за пределы родительского блока и отступы соответствовали исходным значениям при отсутствии применения этого свойства? Код: [ссылка](https://codepen.io/T_Erm/pen/OJYPJpN?editors=1111)

11 мая 2024 г. 6:00

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы изменить размер родительского блока в зависимости от угла поворота дочернего блока, можно использовать JavaScript для динамического изменения размеров родителя. 

Примерно следующим образом можно адаптировать размеры родительского и дочернего блоков при применении поворота через свойство transform в CSS:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Example</title>
<style>
    .parent {
        width: 400px;
        height: 400px;
        background-color: lightblue;
        position: relative;
    }
    
    .child {
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>

    <script>
        const parent = document.querySelector(".parent");
        const child = document.querySelector(".child");

        function updateParentSize() {
            const bounds = child.getBoundingClientRect();
            parent.style.width = bounds.width + 'px';
            parent.style.height = bounds.height + 'px';
        }

        window.onload = updateParentSize;
        window.onresize = updateParentSize;
    </script>
</body>
</html>
```

В этом примере JavaScript используется для динамического изменения размеров родителя и его привязка к размерам повернутого дочернего блока. Код JavaScript обновляет размеры родителя при загрузке страницы и при изменении размеров окна браузера.

Answer 2

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