Valid range for css rotate degree

Question

I build a clock by rotating the clock hands on transform: rotate(xxdeg). In this clock, the degree of second-hand increases 6deg every second, so the value will be great max after a long time running.

I wonder if there is a valid range for the degree in CSS. I've searched but no result. Where can I find info like this one?

I have test my code, it doesn't work when the second degree value initialled over 18-digit. secondDeg = 90 + (second / 60) * 360 + 10000000000000000; You can see it ↓

const secHand = document.querySelector('.second-hand');
const minHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

let secondDeg = 0,
  minDeg = 0,
  hourDeg = 0;

setDate();

function setDate() {
  const date = new Date();
  const second = date.getSeconds();
  const min = date.getMinutes();
  const hour = date.getHours();

  secondDeg = 90 + (second / 60) * 360 + 10000000000000000;
  // the init degree value of second-hand.
  // When it over 100000000000000000, the clock doesn't work.
  minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360;
  hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360;
}

function updateDate() {
  secondDeg += (1 / 60) * 360;
  minDeg += ((1 / 60) / 60) * 360;
  hourDeg += (((1 / 60) / 60) / 12);

  secHand.style.transform = `rotate(${ secondDeg }deg)`;
  minHand.style.transform = `rotate(${ minDeg }deg)`;
  hourHand.style.transform = `rotate(${ hourDeg }deg)`;
}

setInterval(updateDate, 1000);

.clock {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
}
.clock-face {
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
}
.hand {
  width: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 50%;
  transform-origin: 100% 50%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68);
}
.clock-face:after {
  width: 2em;
  height: 2em;
  left: 50%;
  top: 50%;
  position: absolute;
  display: block;
  content: '';
  background-color: #a8c5d1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hour-hand {
  width: 40%;
  height: 10px;
  margin-top: -5px;
  transition: all 3s;
}
.min-hand {
  width: 45%;
  height: 5px;
  margin-top: -2.5px;
  transition: all .1s;
}
.second-hand {
  height: 2px;
  margin-top: -1px;
  background-color: red;
}

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

Answer 1

There doesn't seem to be a limit. I built a little demo for you. The paragraphs rotate when you click on them (and animate for 5 seconds). The last two rotate by a 20-digit value (1238739872598740096deg) and negative that for the last one.

$(document).ready(function(){
  $('div').on('click','p', function(el){
    $(el.target).toggleClass('reset');
  });
});

p {display:inline-block;transition:transform 5s;}
div:nth-of-type(1) p{transform:rotate(15deg);}
div:nth-of-type(2) p{transform:rotate(150deg);}
div:nth-of-type(3) p{transform:rotate(1500deg);}
div:nth-of-type(4) p{transform:rotate(15000deg);}
div:nth-of-type(5) p{transform:rotate(14010deg);}
div:nth-of-type(6) p {transform:rotate(1238739872598740096deg);}

div:nth-of-type(7) p {transform:rotate(-1238739872598740096deg);}

p.reset {transform:rotate(0deg) !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p>example text</p></div>
<div><p>example text</p></div>
<div><p>example text</p></div>
<div><p>example text</p></div>
<div><p>example text</p></div>
<div><p>HUUUGE rotate</p></div>
<div><p>reverse rotate</p></div>

Answer 2

For degree specifically, I believe it will accept any number and divide it by 360 to calculate.

Example:

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 10px;
  color: white;
}

#one {
  background-color: red;
  transform: rotate(-358deg);
}

#two {
  background-color: orange;
  transform: rotate(-718deg);
}

#three {
  background-color: green;
  transform: rotate(358deg);
}

#four {
  background-color: blue;
  transform: rotate(718deg);
}

<div class="box" id="one">-358</div>
<div class="box" id="two">-718</div>
<div class="box" id="three">358</div>
<div class="box" id="four">718</div>

If you're interested in knowing what rotate() can accept, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/angle