首先 要使用transform-origin屬性，必須使用transform 屬性，其有很多屬性，我們只需要用到transform的rotate屬性（設(shè)置2D旋轉(zhuǎn)角度），再搭配 transform-origin 設(shè)置其中心點(diǎn)。最后搭配css3動(dòng)畫屬性animation。完成我們想要的效果。
先上效果圖：
圓都是動(dòng)態(tài)的。
步驟如下：
1、transform屬性使用：
我們只需要利用這個(gè)屬性設(shè)置我們需要這個(gè)點(diǎn)在圓上的那個(gè)位置。transform:rotate(你需要的度數(shù)deg)。另外我們需要注意一個(gè)點(diǎn)（如果是需要小圓分布在大圓的圓邊上，我們需要給大圓設(shè)置相對(duì)屬性position: relative，給小圓設(shè)置絕對(duì)屬性position: absolute，來(lái)防止小圓跑到大圓外了）。這樣我們就完成了第一步。
2、transform-origin屬性使用：
首先我們需要明白transform-origin屬性的意義。其可以設(shè)置3個(gè)屬性，我理解為分別為依次XYZ三個(gè)軸。我們這里需要使用XY2個(gè)軸。其默認(rèn)屬性是 50% 50% 0。那么這是啥意思呢？很簡(jiǎn)單，就是以設(shè)置了這個(gè)transform-origin屬性的節(jié)點(diǎn)的左上角為起始點(diǎn)。向X軸移動(dòng)50%，Y軸移動(dòng)50%。當(dāng)然如果你想要的中心點(diǎn)不再該節(jié)點(diǎn)內(nèi)，可以使用PX來(lái)指定節(jié)點(diǎn)外的中心點(diǎn)
第二步我們就能得到一個(gè)分部在大圓邊界線上的小圓的效果了
3、animation屬性使用：
同樣，首先我們需要知道animation屬性為動(dòng)畫，具體自己看文檔。我們需要的就是這句話
animation:myfirst 10s linear infinite;
myfirst：為綁定@keyframes用的Id
10s: 時(shí)間
linear: 勻速
infinite： 持續(xù)不斷
最后搭配@keyframes
@keyframes myfirst{
0%{
transform: rotate(0);
}
25%{
transform:rotate(90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}
完成了
到此這篇關(guān)于css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效的文章就介紹到這了,更多相關(guān)css3實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
