[JS30] -2) JS + CSS Clock

8125 ワード

rotate transition-timing-function transform:rotate cubic-bezier JS30 transform-origin transition transform テキストリンク

transform

transform: rotate

transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

transform-origin

transform-origin: x-axis y-axis;回転すると中軸に戻ります.

transform-origin: 100%;が与えられると、次のように指定された軸の周りに回転します.

JS-時計回りを一定時間移動

const $hourHand = document.querySelector(".hour-hand");
const $minHand = document.querySelector(".min-hand");
const $secondHand = document.querySelector(".second-hand");

setInterval(getSec, 1000);

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

  $secondHand.style.transform =
    `rotate(${second / 60 * 360 + 90}deg)`;

  $minHand.style.transform =
    `rotate(${min / 60 * 360 + 90}deg)`;

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