CODEWITHSUNDEEP
cssmathsassstyling
Budi
Budi

Reputation: 688

Normalize the position of a transform rotate element with transform translate

I was in my last years still not able to find a solution, to normalize element positions, after i rotate them.

Here is my example: https://stackblitz.com/edit/typescript-9n8zaq

It's about positioning the upper <div> with transform so that the yellow lower cut edge at each resolution is exactly where the two red lines meet. (Changes the view width.) If the cut edge of the yellow element does not conform to the red line collision point at any width, the formula is wrong)

The width and height I have set to double the value of, otherwise this would not fill the full height and width by the rotate. width and height should therefore remain at these values.

Solely changed, should transform: rotate (-10deg) translate (-25%, calc (-50% - 10%)); in the class .view-area-top

Upvotes: 0

Views: 392

Answers (1)

Nico Schertler
Nico Schertler

Reputation: 32587

transform: translate(-25%, -50.77%) rotate(-10deg) ;

The horizontal -25% brings the box back to the horizontal midline. The vertical -50.77% positions the lower edge onto the red cross. The number is 50.77% = 50% / cos(10°).

Here is another variant that keeps the center of the lower edge on the cross:

transform: translate(-25%, -50%) translate(0, 50%) rotate(-10deg) translate(0, -50%);

The first translation moves the center of the lower edge onto the cross (without any rotation). The next three transforms are a rotation about the center of the lower edge (translate to the pivot point, rotate, translate back). Of course, you can combine the first two translations, but this will make it a bit harder to read.

Upvotes: 1

Related Questions