前言
最近做的一個煙花動畫，就是煙花散開的動畫，在動畫的實現過程中，主要在煙花旋轉過程中卡住了，后來發現主要對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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
