【JS30-2】CSS + JS Clock

JS + CSS Clock

JavaScript30 傳送門：https://javascript30.com/
今天才發現可以不用看著影片一步一步寫，可以自己先寫寫看😛

第二個挑戰是用 JS + CSS 寫一個時鐘，不過其實檔案裡面 HTML 跟 CSS 都已經寫好了，三個指針也都放好了，Go Live 起來就長這樣：

start 檔

到頭來只需要思考如何讓指針隨著 now 動起來！

CSS transform、transition

因為要讓指針以圓心為支點旋轉，所以開始找 rotate 的方法，才對於 CSS 的 transform 跟 transition 有更深的了解。

平常很少在 CSS 寫到這兩個屬性（或是寫到的時候都在放空），發現自己根本沒有搞懂過這兩個差別～現在要來還債惹：

• Transform：The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. （CSS 變換屬性可讓您旋轉、縮放、傾斜或平移元素。它修改 CSS 視覺格式化模型的座標空間。）

• Transition：The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior. （CSS 過渡屬性是 transition-property、transition-duration、transition-timing-function、transition-delay和transition-behavior 的簡寫屬性。）（有講跟沒講一樣）

總之學了一年的前端，現在才知道一個是改變外觀或位置、一個是設定過渡效果😀

寫到這裡好懶，就這樣吧。