Rotation in Css and JS

Question

I'm pretty new to coding and trying my best in the HTML, CSS and JS field. Currently, I try out the JS coding challenge Javascript 30 so most of the code is not mine.

It's a clock with 3 hands for seconds, minutes and hours, working with the CSS transform(rotate) and of course JS.

I wanted to enhance it by giving the hands a text saying second minute or hour but the problem is when the hand is on the right side of the clock (so between 0 and 6) the text is of course upside down.

So I wanted to rotate it (again) while it is in this area. I added a span in the HTML around that text, a .spanrotate class in CSS and tried to rotate it with JS.

I guess the problem is that the text is already rotating clockwise so I cannot use the CSS transform(rotate) again? The .spanrotate CSS class works if I fill it with i.e. a color, but it doesn't work with the rotate thing.

Suggestions?

(And I know I could do that code shorter but as I said, am still new to this ;) )

---

let secondHand = document.querySelector('.second-hand');
let minHand = document.querySelector('.min-hand');
let hourHand = document.querySelector('.hour-hand');

let secondSpan = document.getElementById('secondspan');
let minSpan = document.getElementById('minspan');
let hourSpan = document.getElementById('hourspan');

function setDate() {
  let now = new Date()

  let seconds = now.getSeconds();
  let secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  let mins = now.getMinutes();
  let minsDegrees = ((mins / 60) * 360) + 90;
  minHand.style.transform = `rotate(${minsDegrees}deg)`;

  let hour = now.getHours();
  let hourDegrees = ((hour / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

function rotateText() {
  let now = new Date()

  let seconds = now.getSeconds();
  let secondsDegrees = ((seconds / 60) * 360) + 90;
  if (secondsDegrees <= 270) {
    secondSpan.classList.add('spanrotate');
    console.log(secondsDegrees);
  } else {
    secondSpan.classList.remove('spanrotate');
  }
}

setInterval(setDate, 1000);
setInterval(rotateText, 1000);

.hand {
  width: 50%;
  height: 20px;
  background: rgb(255, 0, 0);
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.spanrotate {
  transform: rotate(180deg);
}

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"><span id="hourspan">Stunde</span></div>
    <div class="hand min-hand"><span id="minspan">Minute</span></div>
    <div class="hand second-hand"><span id="secondspan">Sekunde</span></div>
  </div>
</div>