CSS transform-origin的理解

前言

最近作的一個煙花動畫，就是煙花散開的動畫，在動畫的實現過程當中，主要在煙花旋轉過程當中卡住了，後來發現主要對transform-origin屬性理解不深，特意找了個例子來練習，加深了對屬性的理解。

transform-origin做用

這個屬性是用來改變元素變形的原點，通常用來配合旋轉來使用最多。接收參數可爲一個、兩個、三個。當爲兩個值，分別表明距離盒模型左側的值，如transform-origin: 50px 50px;，表示該容器的旋轉中心變爲以盒模型左上角爲原點，X和Y軸距離50px爲原點進行旋轉。

時鐘時針的繪製

中間那個豎條爲咱們最初始設置的，後面的均基於此進行旋轉

<div class="clock">
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
  </div>

從下面的CSS代碼能夠看出，咱們設置了旋轉中心爲第一個豎線的(3,105)px爲原點進行旋轉，這裏的距離爲距離盒模型左側的值，理解這一點，就能夠寫出其餘的時針了，而後分別旋轉便可獲得時針。因爲不理解這裏的取值時相對於哪一個位置進行計算的，於是踩了很多的坑。

CSS

.hour {
  position: absolute;
  left: 105px;
  width: 6px;
  height: 50px;
  background-color: #000;
  border-radius:6px;
  -webkit-transform-origin:3px 105px; 
          transform-origin:3px 105px;
}
.hour:nth-child(2) {
  transform:rotate(45deg);
}
.hour:nth-child(3) {
  transform:rotate(90deg);
}
.hour:nth-child(4) {
  transform:rotate(-45deg);
}
.hour:nth-child(5) {
  transform:rotate(-90deg);
}

參考

MDN