I have a unique clock design where the hands are actually words (for example: < p >WORD< /p >), but when they pass 180deg, they naturally turn upside down. Normally, flipping them using transform properties like rotate would be simple, but since transform is the only method setting the hands at the correct time, I cannot use any other transform CSS that might disrupt it.
Is there an alternative solution to flip the text as soon as it reaches 180deg?
Here is a snippet of the CSS code:
#shortHand{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 10% 70%;
transform-origin: 0% 50%; }
And here is an example in JavaScript for setting the time:
shortHand.style.transform = `rotate(${currH}deg)`;