Question

我通过在transform: rotate(xxdeg)上旋转时钟指针来构建时钟。在这个时钟中，二手的程度每秒增加6度，因此在长时间运行后该值将是最大的。

我想知道CSS的学位是否有效。我搜索过但没有结果。我在哪里可以找到这样的信息？

我测试了我的代码，当第二个度值初始化超过18位时，它不起作用。 secondDeg = 90 + (second / 60) * 360 + 10000000000000000; 你可以看到它↓

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

似乎没有限制。我为你建了一个小演示。当您点击它们时段落旋转（并且动画为5秒）。最后两个旋转了一个20位数值（1238739872598740096deg），而最后一个旋转为最后一个。

$(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

对于学位而言，我相信它会接受任何数字并将其除以360来计算。

示例：

.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>

如果您有兴趣了解rotate（）可以接受的内容，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/CSS/angle

css旋转度的有效范围

2 个答案: