前言

最近做的一個(gè)煙花動(dòng)畫，就是煙花散開的動(dòng)畫，在動(dòng)畫的實(shí)現(xiàn)過程中，主要在煙花旋轉(zhuǎn)過程中卡住了，后來發(fā)現(xiàn)主要對(duì)transform-origin屬性理解不深，特地找了個(gè)例子來練習(xí)，加深了對(duì)屬性的理解。

transform-origin作用

這個(gè)屬性是用來改變?cè)刈冃蔚脑c(diǎn)，一般用來配合旋轉(zhuǎn)來使用最多。接收參數(shù)可為一個(gè)、兩個(gè)、三個(gè)。當(dāng)為兩個(gè)值，分別代表距離盒模型左側(cè)的值，如transform-origin: 50px 50px;，表示該容器的旋轉(zhuǎn)中心變?yōu)橐院心Ｐ妥笊辖菫樵c(diǎn)，X和Y軸距離50px為原點(diǎn)進(jìn)行旋轉(zhuǎn)。

時(shí)鐘時(shí)針的繪制

中間那個(gè)豎條為我們最初始設(shè)置的，后面的均基于此進(jìn)行旋轉(zhuǎn)

  <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代碼可以看出，我們?cè)O(shè)置了旋轉(zhuǎn)中心為第一個(gè)豎線的(3,105)px為原點(diǎn)進(jìn)行旋轉(zhuǎn)，這里的距離為距離盒模型左側(cè)的值，理解這一點(diǎn)，就可以寫出其他的時(shí)針了，然后分別旋轉(zhuǎn)即可得到時(shí)針。由于不理解這里的取值時(shí)相對(duì)于哪個(gè)位置進(jìn)行計(jì)算的，因而踩了不少的坑。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。