Keep rotated object inside parent on X axis
Hi all. I'm struggling with this rotated DIV inside it's parent. On the Y axis it's okey for the child to overflow. But on the X axis I want the child to stick to the right border. How can I achieve this?
https://codepen.io/commproNL/pen/gOBMeNX
4 Replies
I added a translateX(-20%) and it seems to did it.
I tried to adjust the screen size to see if it's responsive, and it was.
Though you should try it too.
Yes, but no, kind of... I would like to know why 20%. This is sort of a trial and error thing. I would like to know the reason and the calculation behind it
It's just math, at the end of the day, using Pythagoram theorem.
The diagonal is the width (or height) multiplied by the square root of 2...
Your square changes size, but for now, let's pretend it's fixed at
300px.
The diagonal of the square is then 300px * sqrt(2)
So the diagonal is 424.3px.
That means the square is now 124.3px wider than it was, now that it's turned (424.3 - 300).
Half of that width is on each side, so we can divide that by two and get 62.15px... so we need to translate it over by that much.
But that's assuming it's static, but in your case, it's not static, it's responsive and the size can change...
We can turn the new number into a percentage though: 62.15 / 300 which gives us 20.72% 😄
--
On a side note, I'd remove the top: 50%, since you're just moving it back with your translate anyway... if you take the top: 50% off, you can also take the `translateY off) 🙂Thanks @Kevin !