CSS positioning a rectangle after rotated with transform matrix

0
votes

I am using CSS transform matrix in order to rotate a div. After rotation is applied, I want to position the div using css 'left' and 'top'.

The problem is that the css positioning is ignoring the rotation, and treats the rectangle like it is not rotated. For example, if I rotate the rectangle 90 deg and then set it to left 0px and top 0px, it wont show up in the upper-left corner of the container. It will be the same result as if I position the original rectangle in 0,0 and only then rotate it (it will look like it is in 10px,-5px or so).

All the answers online talk only about getting the position of rotated rectangle but not setting.

Thanks.

2
cssrotationtransform
use margin instead or cover with a div or span and then do that to the same.... – SaurabhLP
margin is creating the same results. – Light
try contain your html structure into a div or span, then position it... – SaurabhLP

2 Answers

1
votes

Eventually I solved it with simple logic:

newX = x - (originalWidth - boundedW) / 2;
newY = y - (originalHeight - boundedH) / 2;
0
votes

There is no way that you can position the div after the rotation.

What you can do is position the corner that you really want, and then set this position as the rotation center.

If you give an specific example then I can give you a more detailed answer.