Skip to main content
Question

Incorrect css code for rotated objects?

  • January 15, 2022
  • 2 replies
  • 1114 views

Joseph_N

I created a rectangle, with the following attributes:
top: 100
left: 100
width: 100
height: 100

Then, I copy-pasted the rectangle and changed the rotation value of the copy to 45.

Then I created a new html file with two divs and applied the generated css code to both of them. Here’s the comparison of figma vs html/css:

Isn’t generated css supposed to look the same?
It seems to me figma rotated the rectangle around its center, but the css rotated it around the bottom right corner.

This topic has been closed for replies.

2 replies

Joseph_N
  • Author
  • 1 reply
  • January 15, 2022

Here’s the css code for the 2nd (red) rectangle. Notice how the top and left are no longer 100 and 100. If they stayed the same, the result would be identical to what’s rendered in figma.

/* Rectangle 2 */

position: absolute;
width: 100px;
height: 100px;
left: 79.29px;
top: 150px;

background: #FF0000;
transform: rotate(-45deg);

  • 0 replies
  • February 14, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings