Доброго времени суток, есть такой пример:
<!DOCTYPE html>
<html lang="en">
<body>
<div style="height: 20vh; width: 40vw; clip-path: polygon(0 10vh, 40vw 0, 40vw 10vh, 0 20vh); background-color: green;">
<span style="position: absolute; top: 5vh; left: 20vw; display: block; font-size: 50px; writing-mode: tb-rl; overflow: hidden; background-color: red; transform: rotate3d(0.4, 0, 1, -100deg);">text</span>
</div>
</body>
</html>
Задача с помощью rotate3D наклонить так, чтобы его грани были параллельны граням видимой части родительского прямоугольника
У меня получилось найти нужный угол наклона по теореме Пифагора с помощью js, но действует это только на плоскость Y, стоит изменить значение наклона по оси X и все летит
Да и даже такой нерабочий вариант довольно накладный
Что я хотел бы в идеале: получить координаты каждого угла наклоненного span и вычислить расстояние до сторон родительского прямоугольника, тем самым сделав расстояния равными, а стороны параллельными, но я не знаю как это сделать
По сути мне просто нужно удостовериться в параллельности сторон дочернего и родительского прямоугольников
Да, родительский прямоугольник div наклонить не получится по ряду причин в самом проекте, поэтому там возможна только обрезка
Простой
Средний
