How to align block css in 3D?

A

Andrei1penguin12021-06-22 19:15:31

css

Andrei1penguin1, 2021-06-22 19:15:31

Hello, here is an example:

<!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>

The task is to tilt using rotate3D so that its edges are parallel to the edges of the visible part of the parent rectangle
. I managed to find the desired angle of inclination using the Pythagorean theorem using js, but this only affects the Y plane, it is worth changing the value of the slope along the X axis and everything flies
Yes and even such a non-working option is quite overhead
. What I would like ideally is: to get the coordinates of each corner of the slanted span and calculate the distance to the sides of the parent rectangle, thereby making the distances equal and the sides parallel, but I don’t know how to do this
Basically, I just need make sure the sides of the child and parent rectangles are parallel
Yes, the parent div rectangle cannot be skewed for a number of reasons in the project itself, so only cropping is possible there