Q: 連假後腦袋不好使呢！
A: 腦袋可不可以也Rotate轉起來？

本篇還是Loading，這次要做的是一個常見的時鐘icon，內部的指針會一直旋轉的Loading效果。

先畫出鐘面以及指針

將指針定位在正中間，且bottom定位為50%。

<style>
  .container {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: LightCyan;
    border: 6px solid DarkCyan;
    border-radius: 50%;
  }
  .dot {
    position: absolute;
    left: calc(50% - 6px);
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    background-color: DarkCyan;
    border-radius: 50%;
  }
  .pointer {
    position: absolute;
    left: calc(50% - 6px);
    bottom: 50%;
    width: 12px;
    border-radius: 6px 6px 0 0;
    background-color: DarkCyan;
  }
  .hour {
    height: 45px;
  }
  .min {
    height: 60px;
  }
</style>

<div class="container">
  <div class="dot"></div>
  <div class="pointer min"></div>
  <div class="pointer hour"></div>
</div>

讓指針旋轉

為了讓指針以中心點旋轉，會需要修改transform-origin，也就是元素變形的軸點，預設為元素的正中央，如果只修改 Y 軸的軸點，則 X 軸會為值在正中央，指針將以元素的最下方作為旋轉的軸點，所以將transform-origim設置為bottom。這時候transform旋轉角度時，就會是時鐘的旋轉的樣子。

<style>
  .pointer {
    transform-origin: bottom;
  }
  .hour {
    transform: rotate(45deg);
  }
  .min {
    transform: rotate(260deg);
  }
</style>

無限旋轉

要讓指針無限旋轉就可以用animation啦！由於指針都是旋轉一圈，只有時間不一樣，所以將共同使用的屬性寫在.pointer，在針對不同的指針給予不同的animation-duration。

<style>
  .pointer {
    animation-name: clockRotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .hour {
    animation-duration: 5s;
  }
  .min {
    animation-duration: 1s;
  }
  @keyframes clockRotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

本篇比較特別的屬性為transform-origin，可以改變元素transform的軸點！如果值為scale(1.2)，則預設會以元素的正中心放大，但如果修改transform-origin設置為right bottom，那麼元素放大的軸點就會變成右下角。當要做色塊縮放、旋轉等等元素變形效果時，transform-origin的設置可以為動態效果帶來更多變化！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！