Is it possible to combine transform (no animation) with animation?

Question

css

Goodnight.
An example is here . I'm trying to center an element vertically and then rotate it. The difficulty is that the first transform is not applied when the animation is on, and since the element can be of a random height, this is the best centering option of all. How to be? ..
Thank you.

Answer 1

You know the element's height, so why are you trying to center it with translateY(-50%)? Use a negative margin-top for half the height of the element and that's it. In general, centering elements using transforms is an extremely unreliable thing, because on odd values ​​you will get garbage due to half-pixel rendering.

Answer 2

Is this the result you wanted to achieve?