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.
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);
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.