1

I need to calculate the width of a rotated div using only the window height and width, so that it only leaves room for an empty triangle in the top left and the bottom right of the webpage.

Something like this (red part is the rotated div):

enter image description here

The problem I have is that the calculation for the correct width needs to work for every window width and height combination. I am convinced this is possible using trigonometry, but it's been quite a while since I actually worked with sin/tan/cos/etc. and so far nothing I tried really worked, so I need some help/pointers.

To summarize what I want to achieve:

  • There should be an empty triangle top left with an angle of 55 degrees and a height of 150px;

  • There should also be an empty triangle bottom right with the same dimensions as above

  • There should be a div that gets rotated like this:

    transform: rotateX(45deg) rotateZ(45deg); transform-origin: top left;

  • The only thing that should be changed about the rotated div is the "width" css attribute. This values should change depending on the window height and width (these are the only variables).

I have tried multiple things, but I just can't figure it out. Here is my lastest attempt (try changing window size to see the problem):

https://codesandbox.io/s/relaxed-shtern-qphkj

As you can see I managed to always have the exact same top left triangle regardless of window height and width. The problem is the bottom right triangle, that either gets overlapped by the rotated div (aka rotated div is too wide) or the empty triangle gets too large (aka the rotated div isn't wide enough).

Any ideas or pointers would be appreciated.

CvP
  • 324
  • 1
  • 4
  • 17
  • 1
    The red area in the image is not only rotated, it's also skewed. – Teemu Nov 16 '21 at 19:36
  • Correct, I rotate both on the X-axis and the Z-axis, which results in a skewed div. – CvP Nov 16 '21 at 19:43
  • 1
    Late to the question, but believe the solution involves mapping a 3d projection to a 2d plane, before you even get to the point of determining the 2d bounding coordinates. Thus, you need to consider https://stackoverflow.com/questions/724219/how-to-convert-a-3d-point-into-2d-perspective-projection . – Trentium Dec 13 '21 at 23:37

0 Answers0